react native 如何打包生成Js Bundle文件(以android 為例)

一、準(zhǔn)備條件

android工程中已經(jīng)創(chuàng)建assets/index.android.bundle 文件

二、在react native中輸入命令打Bundle包

打包命令說(shuō)明:

react-native bundle [參數(shù)]
  構(gòu)建 js 離線包 

  Options:

    -h, --help                   輸出如何使用的信息
    --entry-file <path>          RN入口文件的路徑, 絕對(duì)路徑或相對(duì)路徑
    --platform [string]          ios 或 andorid
    --transformer [string]       Specify a custom transformer to be used
    --dev [boolean]              如果為false, 警告會(huì)不顯示并且打出的包的大小會(huì)變小
    --prepack                    當(dāng)通過(guò)時(shí), 打包輸出將使用Prepack格式化
    --bridge-config [string]     使用Prepack的一個(gè)json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
    --bundle-output <string>     打包后的文件輸出目錄, 例: ./android/app/src/main/assets/index.android.bundle
    --bundle-encoding [string]   打離線包的格式 可參考鏈接https://nodejs.org/api/buffer.html#buffer_buffer.
    --sourcemap-output [string]  生成Source Map,但0.14之后不再自動(dòng)生成source map,需要手動(dòng)指定這個(gè)參數(shù)。例: /tmp/groups.map
    --assets-dest [string]       打包時(shí)圖片資源的存儲(chǔ)路徑
    --verbose                    顯示打包過(guò)程
    --reset-cache                移除緩存文件
    --config [string]            命令行的配置文件路徑

命令如下??

react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/

注意如果你的android 工程assets下沒(méi)有index.android.bundle 此文件那么會(huì)提示寫(xiě)入錯(cuò)誤 如下圖


打包成功之后可以使用beyond compare工具對(duì)比android 目錄下的變動(dòng)



會(huì)發(fā)現(xiàn)除了assets目錄是開(kāi)發(fā)者主動(dòng)新建的其余目錄則由打包時(shí)自動(dòng)生成。

index.android.bundle里面包含了所有js代碼(RN源碼、第三方庫(kù)代碼和自己的業(yè)務(wù)代碼)

參考
https://blog.csdn.net/qq_23621841/article/details/81207666
https://zhuanlan.zhihu.com/p/52357602

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容