将ReactNative项⽬打包⽣成jsbundle
⽂章⽬录
reactnative开发
将ReactNative项⽬打包⽣成jsbundle
前⾔
在进⾏原⽣开发时，我们可能需要在原⽣项⽬加载RN的代码，那么需要将RN项⽬打包成bundle⽂件，然后由原⽣对此引⽤。
打包命令
使⽤ react-native bundle --help 来查看打包的具体参数
react-native bundle [参数] 构建 js 离线包
Options:
  -h, --help 输出如何使⽤的信息
  --entry-file <path> RN⼊⼝⽂件的路径, 绝对路径或相对路径
  --platform [string] ios 或 andorid
  --transformer [string] Specify a custom transformer to be used
  --dev [boolean] 如果为false, 警告会不显⽰并且打出的包的⼤⼩会变⼩
  --prepack 当通过时, 打包输出将使⽤Prepack格式化
  --bridge-config [string] 使⽤Prepack的⼀个json格式的⽂件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json --bundle-output <string> 打包后的⽂件输出⽬录, 例: /tmp/groups.bundle
  --bundle-encoding [string] 打离线包的格式可参考链接/api/buffer.html#buffer_buffer.
  --sourcemap-output [string] ⽣成Source Map，但0.14之后不再⾃动⽣成source map，需要⼿动指定这个参数。例: /tmp/groups.map --assets-dest [strin g] 打包时图⽚资源的存储路径
  --verbose 显⽰打包过程
  --reset-cache 移除缓存⽂件
  --config [string] 命令⾏的配置⽂件路径
  --bundle-output bundle⽂件输出路径
  --assets-dest 静态资源⽂件输出路径
在RN项⽬根⽬录下创建/out/ios⽂件夹和/out/android⽂件夹。
IOS:
react-native bundle --entry-file index.js --bundle-output ./out/ios/index.ios.bundle --platform ios --assets-dest ./out/ios --dev false
Android:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output ./out/android/index.android.bundle --assets-dest ./out/android
值得注意的是，我们在打包bundle的时候，默认使⽤模块名为RN项⽬⼯程中的app.json的name，在原⽣代码引⽤这个bundle时，这个moduleName要保持⼀致。
如果需要修改模块名，则对应的rn⼯程⾥，package.json/app.json的name需要修改，并且，在android⽂件夹中，修改MainActivity的getMainComponentName()⽅法返回的name，在ios⽂件夹中，修改AppDelegate.m的moduleName。
如果出现⽆法打安卓包的情况，考虑是否正确安装配置了JDK；如果出现⽆法写⽂件的情况，mac或者linux系统在命令前添加sudo。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。