寫在前面:文章講的是熱更新的基本原理,適用于RN對應的Android和iOS端。不涉及:服務端下發,客戶端校驗和替換操作
如果您已經明白熱更新的原理,請珍惜您的時間繞道去這里
你需要具備的知識:
1.很牛X開源的二進制差分工具Binary diff/patch utility
2.react-native打離線bundle包
操作步驟
① 生成增量包文件
② 增量包和源版本合并生成新的bundle文件
③ 應用使用新的bundle 文件運行驗證
1 生成增量包文件
- 首先,在桌面創建兩個文件夾,也可以跳過該步驟.只要你后面路勁搞得清楚就行.里面放兩個ipa文件,隨便什么文件都行.前提是兩個文件要有點差別.我是在Test里放老的ipa,然后在Test1里放了個修改代碼后的ipa.
-
然后在命令行里
bsdiff ~/Desktop/Test/HotPush.ipa ~/Desktop/Test1/HotPush.ipa ~/Desktop/hot.patched
在桌面你會看到多了個hot.patched 文件,這個hot.patched 就是你需要的那個增量包bsdiff的定義
bsdiff: usage: bsdiff oldfile newfile patchfile
假如你出現了這個:bsdiff: command not found復制下錯誤提示=>去這里 再然后在命令行里
合成新的.ipa
bspatch ~/Desktop/Test/HotPush.ipa ~/Desktop/hot_new.ipa ~/Desktop/hot.patched
bsdiff的定義bspatch: usage: bspatch oldfile newfile patchfile
hot_new.ipa就是最后客戶端運行的那個最新包了.(這里是以iOS 端的例子)
到這里,我們怎么來確保新的包文件就是對的呢,這里就要用到MD5命令了.
上圖中:可以看到合成新包的MD5和Test1里直接打最新代碼的包是一樣的,這就表明增量合成的過程沒有問題.
2 增量包和源版本合并生成新的bundle文件
進到你的RN項目的根目錄,然后命令行執行react-native bundle 命令,參數的話就不一一解釋了
react-native bundle --entry-file index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios -- assets-dest ./ios/bundle --dev false
-
注意 執行前,需要自己在對應目錄上創建空文件夾bundle
圖2-bundle文件
這里我的猜測是:
index.ios.jsbundle 是node_modules的bundle文件,index.ios.jsbundle.meta 則是自己JS代碼的bundle文件.
弄成上圖的樣子后就在xcode上Comand R
你會發現,手機屏幕上方狀態欄的位置有個黑色的加載進度顯示(很快就消失了),這就表示現在的工程不是連接的你電腦上那個npm start 出來的本地服務.綠色的加載進度表示你是跑的本地起的服務,而不是離線包.
圖片里的bundleURL 方法看你自己情況而定,只要能讓app 找到對應的bundle文件就好.如果找不到,會去你localhost 找,再找不到就會包找不到服務的錯.
至此,我們已經完成了準備工作.
隨便在你項目里修改下代碼,然后保存.然后再react-native bundle 一次,這里要注意點:這里換下output 的路勁,方便后面新舊的對比,我這邊是直接放到桌面了的Test了
命令A:react-native bundle --entry-file index.ios.js --bundle-output ~/Desktop/Test/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
新舊資源包進行最開始的diff 和patch 操作
命令B:bsdiff ~/Desktop/Test/index.ios.jsbundle.meta ~/Desktop/HotPush/ios/bundle/index.ios.jsbundle.meta ~/Desktop/hot.patched
會看到桌面有個hot.patched 的文件
命令C:bspatch ~/Desktop/HotPush/ios/bundle/index.ios.jsbundle.meta ~/Desktop/Test/index.ios.jsbundle.meta ~/Desktop/hot.patched
經過命令C后,就在桌面上得到了新的index.ios.jsbundle.meta ,這個meta其實和命令A 放在Test里面的是一樣,可以用md5 校驗
然后把上圖中新的index.ios.jsbundle.meta文件拖到你的工程里,就是圖2的最后一級目錄里,然后會提示你有同名文件了,選擇替換.
3 應用使用新的bundle 文件運行驗證
這一步就是驗證了,替換bundle文件后,點擊運行.(其實替換這一步應該是在打包好的客戶端里操作的),你會發現是你修改后的代碼了.
寫在最后:
講的那么一大堆的東西,只是為了自己能搞懂熱更新腳本都做了些啥,然后自己手動做一遍.可能后面在RN里面寫那些熱更新的代碼的時候就會簡單很多吧.網上有很多Pushy和react-native-code-push 的使用教程,但是一看他們的源碼就懵逼了 .我就是在看了Pushy 的源碼后,寫這些的.
