️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。