📦 Rn Bundle To GithubReact — Rn Bundle 到 GitHub
v1.0.0Native bundle 发布到 GitHub 的完整工作流。当需要为 React Native 项目打包并发布到 GitHub Release 时激活。包括:(1) 初始化 RN 项目发布配置,(2) 使用 publish.sh 自动发布 release/debug 版本,(3) 生成包含 And...
详细分析 ▾
运行时依赖
版本
- rn-bundle-to-github 初始发布:一套完整的 React Native 项目打包并发布到 GitHub Releases 的工作流。 - 自动化 RN 项目发布配置、打包生成(Android/iOS)、版本号递增及变更日志创建。 - 提供 publish.sh 脚本,支持一键发布正式版(production)与调试版(prerelease)。 - 使用 GitHub Releases 进行版本管理、回滚及热更新分发。 - 文档涵盖安装配置、发布流程、版本规则、API 集成、故障排查与优化建议。
安装命令
点击复制技能文档
本 skill 用于将 React Native 项目的 JavaScript 代码打包成 bundle 并发布到 GitHub Release。
核心概念
什么是 Bundle?
Bundle 是 React Native 应用编译后的 JavaScript 代码包,包含了应用的所有业务逻辑。移动端加载 bundle 即可运行应用,无需连接开发服务器。为什么发布到 GitHub?
- 热更新: App 可以从 GitHub 下载最新 bundle 实现热更新,无需重新发布应用市场
- 版本管理: GitHub Release 提供版本化管理,支持回滚
- 独立性: Bundle 独立于应用本身,可以独立更新
Release vs Debug 版本
| 类型 | 格式 | 示例 | prerelease | 用途 | |--------|------------|------------|------------|----------| | Release|vx.x.x | v1.0.3 | false | 正式版本 |
| Debug | vx.x.x.x | v1.0.1.5 | true | 开发/测试版本 | Debug 版本通过 GitHub API 的 prerelease: true 标记,可以在 App 端过滤区分。
快速开始
前提条件
- Node.js >= 18
- GitHub 账号和仓库
- GitHub Personal Access Token
Step 1: 配置 GitHub Token
``bash
# 创建 token 文件(只读权限即可)
echo "ghp_xxxxxxxxxxxx" > ~/.github_token
chmod 600 ~/.github_token
`
Token 需要 repo 权限才能创建 Release 和上传 assets。 Step 2: 初始化项目
在 RN 项目根目录执行:
`bash
# 下载发布脚本
curl -o publish.sh https://raw.githubusercontent.com/lvtong199881/MyRNApp/refs/heads/main/publish.sh
chmod +x publish.sh # 添加 npm scripts(可选)
npm pkg set scripts.release="bash publish.sh"
npm pkg set scripts.debug="bash publish.sh debug"
`
Step 3: 发布版本
`bash
# 发布正式版本
npm run release
# 或直接执行 ./publish.sh # 发布调试版本
npm run debug
# 或直接执行 ./publish.sh debug
`
发布流程详解
完整步骤
`
- [检查] 验证未提交的 Git 改动
- [版本] 计算新版本号并更新 package.json
- [依赖] 执行 npm install 更新 lock 文件
- [打包] 生成 Android 和 iOS bundle
- [日志] 获取上一个版本的 commit SHA
- [日志] 生成 changelog 内容
- [文档] 更新 CHANGELOG.md
- [Git] 提交改动并推送到远程
- [Git] 创建 tag 并推送
- [GitHub] 创建 Release
- [GitHub] 上传 bundle 到 Release
- [完成] 打印发布信息
` 版本号计算规则
Release 版本 (vx.x.x):
- 基于最新 Release tag 的 patch 版本 +1
- 示例: v1.0.2 → v1.0.3
Debug 版本 (vx.x.x.x):
- 首次: 基于最新 Release 添加 .0 → v1.0.1.0
- 后续: 自增末位 → v1.0.1.1, v1.0.1.2
- 如果存在 Debug tag,基于最新 Debug tag 自增
Bundle 生成
`bash
# Android bundle
node node_modules/@react-native-community/cli/build/bin.js bundle \
--platform android \
--dev false \
--entry-file index.js \
--bundle-output ./dist/index.android.bundle # iOS bundle
node node_modules/@react-native-community/cli/build/bin.js bundle \
--platform ios \
--dev false \
--entry-file index.js \
--bundle-output ./dist/index.ios.bundle
`
--dev false 表示生产模式,会进行代码压缩和优化。
GitHub Release 创建
通过 GitHub API 创建:
`bash
POST https://api.github.com/repos/{owner}/{repo}/releases
`
Release 包含:
- tag_name: 版本标签
- name: 显示名称
- body: 发布说明(包含 commit 列表)
- prerelease: 是否预发布
Bundle 下载链接
发布后,bundle 可以通过以下格式访问:
`
# 直接 raw 链接
https://github.com/{owner}/{repo}/raw/{tag}/dist/index.android.bundle # jsDelivr CDN(可选)
https://cdn.jsdelivr.net/gh/{owner}/{repo}@{tag}/dist/index.android.bundle
`
App 端集成
获取最新 Release 版本
`bash
# 获取最新 release
GET https://api.github.com/repos/{owner}/{repo}/releases/latest # 获取最新 debug 版本(prerelease: true)
GET https://api.github.com/repos/{owner}/{repo}/releases?per_page=100
# 然后过滤 prerelease === true 的最新一个
`
下载并使用 Bundle
`kotlin
// Android 示例
val bundleUrl = "https://github.com/lvtong199881/MyRNApp/raw/v1.0.1/dist/index.android.bundle"
// 使用 React Native 的 BundleLoader 加载
` 项目配置要求
| 配置项 | 说明 | 来源 |
|--------------|----------------------|-------------------------------|
| GitHub Token | 用于 API 认证 | ~/.github_token 文件 |
| repo owner | GitHub 用户名 | 从 git remote 获取 |
| repo name | GitHub 仓库名 | package.json 的 name 字段 |
| Git remote | 必须指向 GitHub | 本地 git 配置 | 目录结构
发布脚本会创建以下文件:
`
{project}/
├── publish.sh # 发布脚本
├── dist/
│ ├── index.android.bundle
│ └── index.ios.bundle
├── CHANGELOG.md # 自动生成/更新
└── package.json # 版本号自动更新
` 常见问题
Q: 发布失败 "存在未提交的改动"
需要先提交或 stash:
`bash
git stash && ./publish.sh debug && git stash pop
` Q: 想指定版本号发布
手动修改 package.json 的 version 字段后再执行脚本。 Q: 如何发布到私有仓库
同样适用,确保 Token 有该仓库的 repo 权限。 Q: Bundle 太大怎么办
- 启用 Hermes 引擎(需要重建 android/)可减少 30-50%
- 删除不需要的 npm 依赖
- 避免引入大型第三方库
Q: 如何查看发布了哪些版本
`bash
git tag -l --sort=-v:refname | grep -E '^v[0-9]+\.[0-9]+'
`
或访问 https://github.com/{owner}/{repo}/releases 手动干预场景
只打包不发布
修改 publish.sh,注释掉最后 GitHub API 相关行。 重新发布某个版本
`bash
# 查看历史 tag
git tag -l # 基于某个 tag 重新打包
git checkout v1.0.1
# 修改代码...
./publish.sh
``
回滚到上一个版本
在 GitHub Release 页面下载上一个版本的 bundle,然后在 App 端配置使用该版本的下载链接。优化建议
- 减少依赖: 删除不用的 npm 包,减少安装和打包时间
- 启用 Hermes: 需要重建 android/ 文件夹
- 懒加载: 将部分代码拆分成多个 chunk,按需加载(需要修改 App 加载逻辑)
- 压缩: Metro 已经默认使用 terser 压缩,无需额外配置