開篇之前,先講一個自己開發中的一個小插曲:
今天周日,iOS版 App 周一提交,周三審核通過上架,很給力.不過,中午11:30的時候,運營就反應某個頁面有一個很明顯的問題,頁面沒法拉到底部,部分信息顯示不全;那個頁面是基於react-native寫的,項目中本身已經有了熱更新的相關機制;原因很簡單,13:00左右,解決問題,發了一個補丁,測試環境自測完畢;補丁發給Leader,他可以提交到線上;出去吃飯,13:00 回來午休;14:00,Leader回到工位,補丁提交到線上;確認補丁生效,問題解決.
不要吐槽說,流程可以更優化,解決的問題更快,這涉及到另一個話題,改日有心情再聊.
如果按照沒有熱更新能力的解決流程,大致會是: 11:30 發現問題,13:00 解決,確認測試環境生效;生成測試包,上傳 提交;人品好的話,可以走緊急審核;35天后,問題修復.35天的審核期,有人認為很長,有人早已習以為常.
小插曲而已,看看就好.我只是想讓大家明白,react-native本身,可能對你的業務,確實是一個很有意義的工具,僅此而已.許多人,也是認同 react-native 的價值的,但是可能並沒有在自己的項目中應用,而沒有應用的原因,相對一部分原因,是很難駕馭.從我目前的實踐來看,沒有一個能夠同時自由駕馭Native和react棧的技術人員存在,一個技術組是很難有可能把react-native應用起來的.因為前期,必須有 native 技術棧的人,去填補一些可能用react比較難實現的功能;中后期,又必須 有 react 技術棧的人,來深入地利用react本身的技術棧,來提高開發效率,比如redux的應用等.
類似的例子,我是見過一些,有死在 node 環境配置的,有卡在 native 已有應用無法集成的,當然,也有卡在不知道 如何下手使用 react-native的 的熱更新能力的.
熱更新,本身機制的設計,網上討論的也是有一些,一個最簡化的模型是: react-native 是基於 main.bundle 加載的; main.bundle 本身是一個文件夾;每次打開app,都去查看有無最新的 main.bundle,有就下載更新本地文件即可.blablalba.....會涉及到許多細節問題,但我相信,一個搞Native開發的人,是都可以獨立解決的.
今天,要說的問題是, main.bundle 里,是包含所有的資源文件的,現在發補丁,我是整個 把最新的 完整的 main.bundle 發出去了,本身壓縮后,不到 1M,和一個大圖片也差不多,基本用戶無感;但我現在是需要逐步把原生的部分代碼,逐漸遷移到 react 來的,其中的比較基礎也比較關鍵的一步是,把 原先Native代碼中的資源文件,遷移到 main.bundle 里,使用 main.bundle 管理.
好吧,不要又吐槽我說, main.bundle 里,是不會打包未使用的圖片的; 我的確是,手動把圖片放到 main.bundle 里的,里面新建個 native 文件夾,用於放置 native 代碼需要的一些資源,這樣 native 代碼,也可以部分使用 熱更新的邏輯了.現在項目中,熱更新的邏輯有兩部分: JSPatch 和 react-native,我是通過 一個 補丁類型字段來區分的.如果為 native 和 react單獨分開設計 熱更新機制,想想都心累--或者說,有點太懶,有些代碼,還不想去動.--別怪我話多,這是一個很有價值的策略,如果你也是基於Native來混編react-native的話,或許有種茅塞頓開或者英雄所見略同的感覺,雖然我只在iOS上試驗過.
有點跑題了,再次試圖回歸正題.說到兩個main.bundle 比較diff出一個差集,網上討論的很多,大家搜下,勉強多少有些可以借鑒的.index.jsbundle文件本身的diff,我暫時不考慮,感覺沒必要,壓縮后 只有 300 k的東西,還不值得我去改熱更新的實現代碼,而且 jsbundle 本身的機制一直在變,比如最近的 jsbundle 都有個了一個對應的 index.jsbundle.meta 文件,原來的設計,可能是有問題的;我今天要討論的只是,文件級別的 對比操作--簡單說,就是 找到兩個文件夾中不相同的文件,放到第三個文件夾中,就這樣.
有人說,可以比較 md5 什么的--當然也是可以的;但是,我現在不想去知道這個原理,或者說,原理我是知道的,我不想去實現這段代碼,沒寫過,誰知道有什么坑呢?比如,文件目錄結構如何保留什么的.我想知道的是,有沒有一種簡單的方法,一個ctrl+c ctrl+v,就可以直接得到答案問題的方法?
當然是有的, shell 腳本嘛,什么不可以搞,如下:
rsync -aHxv --progress --compare-dest=$(pwd)/main_old.bundle/ $(pwd)/main_new.bundle/ $(pwd)/main.bundle/
find $(pwd)/main.bundle/ -type d -empty -delete
好吧,腳本本身確實不難,只是我自己剛好需要用到,google出來,再分享給大家而已.我相信,一個深度使用 react-native 到項目中,並且比較依賴其可以熱更新特性的人,是肯定有這個需求的;而且,我也知道,他們相當一部分,要么不能准確地問出問題,要么傻傻地自己去寫 文件夾對比的代碼...我不能說那不對,我想說的是: 編程這種東西, 多學點總是好的.此處奉上原始google參考鏈接,與原始答案有細微不同,懂shell的人,一眼就看的出來,不懂的,估計就算搜到答案,也有很大幾率弄不出來結果.鏈接奉上: http://serverfault.com/questions/506005/compare-2-directories-and-copy-differences-in-a-3rd-directory http://unix.stackexchange.com/questions/24134/remove-empty-directory-trees-removing-as-many-directories-as-possible-but-no-fi
還有就是,react-native 我很看好它,雖然它很有可能將來把我自己的飯碗給砸了.大勢所趨,沒辦法;浪潮之下,要么開車,要么被壓平成路,硬着頭皮上吧,萬一大家以后都用這個搞了呢...