React-Native打離線包
RN-App項(xiàng)目中js代碼和native代碼谦秧，其中js代碼的打包是動(dòng)態(tài)的诞仓，打成jsbundle的過(guò)程中爷绘，js會(huì)將自己所需要的所有的文件（這里指你的js業(yè)務(wù)代碼中的require或者import部分）導(dǎo)入到bundle中捌治。
RN-App項(xiàng)目的結(jié)構(gòu)
一個(gè)完整的RN-app程序通常包含以下幾個(gè)部分：
- native代碼部分-objc部分塑径。引入react-native框架衔彻，代碼中新增的部分是Library部分薇宠。大小在2.2M左右，至于打成
ipa包增大估計(jì)在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代碼澄港、依賴的第三方庫(kù)、業(yè)務(wù)代碼等柄沮。這部分代碼是通過(guò)線上下載的代碼回梧，不會(huì)打到ipa包中，可以通過(guò)熱加載的方式從服務(wù)端加載祖搓。這部分如果采用壓縮方式打包狱意，大小不會(huì)超過(guò)1M。js打成bundle包（可以查看一下bundle包的代碼拯欧，發(fā)現(xiàn)里面全是壓縮了的js）详囤，然后放到服務(wù)器上，下載到APP本地更新镐作。1.js業(yè)務(wù)代碼：這部分代碼很少 2.react-native代碼：這部分代碼就是facebook的開源框架的js代碼藏姐，在打成bundle包時(shí)，不用擔(dān)心所有資源文件都會(huì)打包该贾，js采用的是動(dòng)態(tài)打包方式包各，只會(huì)將自身require或者import的部分打入bundle 包。 3.依賴的第三方庫(kù)：這里指的是我們的js業(yè)務(wù)代碼可能需要依賴一些優(yōu)秀的react開源框架靶庙，如react-native-navbar這種導(dǎo)航欄第三方庫(kù)问畅，通過(guò)require加載，也會(huì)加載到我們的bundle包六荒。有一個(gè)要注意的是护姆，如果依賴的第三方庫(kù)不是純js代碼的話，就不能實(shí)現(xiàn)熱更新掏击。
- 圖片資源部分卵皂。這部分通過(guò)打包命令打包時(shí)生成asset文件夾。
打包命令說(shuō)明
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"];
- 另外一種打包命令添祸，程序運(yùn)行時(shí)執(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
- 查看項(xiàng)目中的main.jsbundle或者main.os.jsbundle發(fā)現(xiàn)bundle文件里是壓縮了的js代碼，該部分代碼包括 業(yè)務(wù)js+react-native代碼+依賴第三方代碼
打包遇到的問題
- 離線包如果開啟了chrome調(diào)試刃泌，hui訪問調(diào)試服務(wù)器凡壤，而且會(huì)一直loading不出來(lái)。一直提示耙替。亚侠。。
Loading from pre-bundled file...
如果bundle的名字是
main.jsbundle俗扇，app會(huì)一直讀取舊的硝烂，改名就好了。铜幽。滞谢。非常奇葩的問題，我重新刪了app啥酱，clean工程都沒用爹凹，就是不能用main.jsbundle這個(gè)名字。這個(gè)問題貌似沒遇到過(guò)镶殷。禾酱。。必須用Create folder references【藍(lán)色文件夾圖標(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打包
重要，待補(bǔ)充
React-Native發(fā)布與熱更新
打包完成之后陷遮，要實(shí)現(xiàn)熱更新滓走，還需要在原生代碼中做一些邏輯處理，簡(jiǎn)單流程如下：
- 首先將上一步輸出的main.jsbundle文件放到服務(wù)器上帽馋，可以達(dá)成zip包下載搅方，進(jìn)一步壓縮文件大小。
- 在App啟動(dòng)的時(shí)候绽族，判斷RN代碼是否有更新姨涡，若有更新，則將更新的包下載下來(lái)吧慢；若沒有更新涛漂，則不做處理。（這部分類似于現(xiàn)有的jspatch更新）。
- 有新的更新匈仗，在加載RN的入口處瓢剿，將url指向新的文件地址。
- 同時(shí)悠轩，為了保證安全性和下載流量间狂，應(yīng)將main.jsbundle用密碼壓縮，在下載下來(lái)之后哗蜈，再進(jìn)行解壓處理前标。
- over
React-Native增量更新
待補(bǔ)充
