React-Native打離線包
RN-App項目中js代碼和native代碼，其中js代碼的打包是動態(tài)的，打成jsbundle的過程中，js會將自己所需要的所有的文件（這里指你的js業(yè)務(wù)代碼中的require或者import部分）導(dǎo)入到bundle中。
RN-App項目的結(jié)構(gòu)
一個完整的RN-app程序通常包含以下幾個部分：
- native代碼部分-objc部分。引入react-native框架，代碼中新增的部分是Library部分。大小在2.2M左右，至于打成
ipa包增大估計在6M~8M以內(nèi)。pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core', 'RCTImage', 'RCTNetwork', 'RCTText', 'RCTWebSocket', 'ART', 'RCTActionSheet', 'RCTGeolocation', 'RCTPushNotification', 'RCTSettings', 'RCTVibration', 'RCTLinkingIOS', ]
- js代碼部分-
rn代碼、依賴的第三方庫、業(yè)務(wù)代碼等。這部分代碼是通過線上下載的代碼，不會打到ipa包中，可以通過熱加載的方式從服務(wù)端加載。這部分如果采用壓縮方式打包，大小不會超過1M。js打成bundle包（可以查看一下bundle包的代碼，發(fā)現(xiàn)里面全是壓縮了的js），然后放到服務(wù)器上，下載到APP本地更新。1.js業(yè)務(wù)代碼：這部分代碼很少 2.react-native代碼：這部分代碼就是facebook的開源框架的js代碼，在打成bundle包時，不用擔(dān)心所有資源文件都會打包，js采用的是動態(tài)打包方式，只會將自身require或者import的部分打入bundle 包。 3.依賴的第三方庫：這里指的是我們的js業(yè)務(wù)代碼可能需要依賴一些優(yōu)秀的react開源框架，如react-native-navbar這種導(dǎo)航欄第三方庫，通過require加載，也會加載到我們的bundle包。有一個要注意的是，如果依賴的第三方庫不是純js代碼的話，就不能實現(xiàn)熱更新。
- 圖片資源部分。這部分通過打包命令打包時生成asset文件夾。
打包命令說明
react-native bundle Options: --entry-file Path to the root JS file, either absolute or relative to JS root [required] --platform Either "ios" or "android" --transformer Specify a custom transformer to be used (absolute path) [default: "/Users/babytree-mbp13/projects/xcodeProjects/AwesomeProject/node_modules/react-native/packager/transformer.js"] --dev If false, warnings are disabled and the bundle is minified [default: true] --prepack If true, the output bundle will use the Prepack format. [default: false] --bridge-config File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json --bundle-output File name where to store the resulting bundle, ex. /tmp/groups.bundle [required] --bundle-encoding Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer). [default: "utf8"] --sourcemap-output File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map --assets-dest Directory name where to store assets referenced in the bundle --verbose Enables logging [default: false]
打包步驟
- cd到工程目錄（
index.ios.js&package.json存放的目錄），執(zhí)行打包命令.react-native bundle --minify --entry-file ./index.ios.js --platform ios --bundle-output ./main.ios.jsbundle --assets-dest ./
命令執(zhí)行完生成
.bundle文件在Xcode中添加
.bunlde和assets，必須是Create folder references的方式。修改
jsCodeLocation。jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtendsion:@"jsbundle"];
- 另外一種打包命令，程序運行時執(zhí)行該命令。
curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.bundle?platform=ios' -o main.jsbundle 或者 curl 'http://localhost:8081/index.ios.bundle?dev=false&minify=true&platform=ios' -o main.jsbundle
- 查看項目中的main.jsbundle或者main.os.jsbundle發(fā)現(xiàn)bundle文件里是壓縮了的js代碼，該部分代碼包括 業(yè)務(wù)js+react-native代碼+依賴第三方代碼
打包遇到的問題
- 離線包如果開啟了chrome調(diào)試，hui訪問調(diào)試服務(wù)器，而且會一直loading不出來。一直提示。。。
Loading from pre-bundled file...
如果bundle的名字是
main.jsbundle，app會一直讀取舊的，改名就好了。。。非常奇葩的問題，我重新刪了app，clean工程都沒用，就是不能用main.jsbundle這個名字。這個問題貌似沒遇到過。。。必須用Create folder references【藍色文件夾圖標(biāo)】的方式引入圖片的assets，否則引用不到圖片
執(zhí)行bundle命令之前，要保證相關(guān)的文件夾都存在
To disable the developer menu for production builds:
For iOS open your project in Xcode and select Product → Scheme → Edit Scheme... (or press ? + <). Next, select Run from the menu on the left and change the Build Configuration to Release.
- over
使用react-native-webpack-server打包
重要，待補充
React-Native發(fā)布與熱更新
打包完成之后，要實現(xiàn)熱更新，還需要在原生代碼中做一些邏輯處理，簡單流程如下：
- 首先將上一步輸出的main.jsbundle文件放到服務(wù)器上，可以達成zip包下載，進一步壓縮文件大小。
- 在App啟動的時候，判斷RN代碼是否有更新，若有更新，則將更新的包下載下來；若沒有更新，則不做處理。（這部分類似于現(xiàn)有的jspatch更新）。
- 有新的更新，在加載RN的入口處，將url指向新的文件地址。
- 同時，為了保證安全性和下載流量，應(yīng)將main.jsbundle用密碼壓縮，在下載下來之后，再進行解壓處理。
- over
React-Native增量更新
待補充
