React-Native 构建jsbundle包&&配置code

构建js.bundle包

<!--模版-->

react-native bundle --platform ios --entry-file index.js --bundle-output <file> --dev false --assets-dest <file>

<!--生成bundle到iOS工程中-->

react-native bundle --platform ios --entry-file index.js --bundle-output ./ios/ReduxProject/main.jsbundle --dev false --assets-dest ./ios/ReduxProject/

<!--生成bundle到指定目录-->

react-native bundle --platform ios --entry-file index.js --bundle-output ./bundles/ios/main.jsbundle -- dev false --assets-dest ./bundles/ios/

可以把脚本写到package.json的script里面

 "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "react-native bundle": "react-native bundle --platform ios --entry-file index.js --bundle-output ./ios/ReduxProject/main.jsbundle --dev false --assets-dest ./ios/ReduxProject/"
  },

出现问题

error SHA-1 for file /usr/local/lib/node_modules/react-native/node_modules/metro/src/lib/polyfills/require.js (/usr/local/lib/node_modules/react-native/node_modules/metro/src/lib/polyfills/require.js) is not computed. Run CLI with --verbose flag for more details.

需要去更新react-native-cli, 再重新构建

npm install -i -g --force react-native-cli

热更新code-push

ReactNative之code-push 热更新

安装code-push-cli

<!--仅仅只安装code-push-cli可能会提示你...no longer supported-->

npm install -g appcenter-cli 或 npm install -g code-push-cli

appcenter.png

账号登录

账号登录 (已登陆过可以无需再登)
code-push login # 登陆
会弹出登录网页，输入正确账号密码，会返回key，输入终端即可

code-push whoami # 登录完成后通过该指令确认账号是否正确

未登录

code-push register #

查看账号下app的版本

code-push app list

查看历史提交记录

 code-push deployment history  ReactNativeApp Staging

codepush.png

如果发现code-push 找不到

echo $PATH
查看当前的环境配置
/Users/tong/.npm-global/bin:/Users/tong/.npm-global/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/tong/Library/Android/sdk/platform-tools:/usr/sbin:/usr/sbin:/Users/tong/Library/Android/sdk/platform-tools

立即生效设置的zshrc

source ~/.zshrc

which npm 查看npm的地址

/Users/tong/.npm-global/bin/npm

开始进行热更新

cd 当前项目

code-push release-react ReactNativeApp ios --t 1.6.1 --dev false --d Staging --des "tong.test" --m true

刚才我们安装的 npm 是在 /usr/local/ 目录下，默认的全局 node_modules 文件夹也是在这个目录下面，后续如果通过 npm 安装全局的命令时会出现一些权限上的问题。我的建议是修改全局 node_modules 文件夹的位置，把它改到我们自己的用户目录下。首先在 home 目录下新建一个给 npm 用的文件夹，比如 ~/.npm-global ，然后新建一个 ~/.npmrc 文件，在里面写上 prefix=~/.npm-global 。这时我们再使用 npm i -g webpack 安装全局命令时，都会被安装到这个文件夹里了，执行 ls ~/.npm-global/bin 就能看到刚刚安装的 webpack 了。

最后，我们需要把 ~/.npm-global/bin 加入到 PATH 变量里面，这样执行 webpack 时就能在 ~/.npm-global/bin 目录下找到它了。一般地，就是在 ~/.bash_profile 里增加 export PATH="PATH" 如果你使用的是其他 shell ，修改方法也是类似的。修改之后需要重新加载一下配置，执行 source ~/.bash_profile 或者新开个 tab 生效。