本文主要是介绍将ReactNative项目打包生成jsbundle，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 将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] 打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.--sourcemap-output [string] 生成Source Map，但0.14之后不再自动生成source map，需要手动指定这个参数。例: /tmp/groups.map --assets-dest [string] 打包时图片资源的存储路径--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。
这篇关于将ReactNative项目打包生成jsbundle的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
