Electron應(yīng)用更新的一個(gè)簡(jiǎn)單方案

CastlePeaK 發(fā)布于2019-08-01 17:27 / 1195人閱讀

摘要：如果第一次分發(fā)倒是沒啥問題，但是每次都這樣整個(gè)應(yīng)用讓運(yùn)營(yíng)手動(dòng)更新，運(yùn)營(yíng)肯定不爽，必須得搞個(gè)自動(dòng)更新方案出來。根據(jù)這樣的更新方案，項(xiàng)目的目錄結(jié)構(gòu)也得做一點(diǎn)改變，在我的項(xiàng)目下主要三個(gè)文件夾，，。

第一次開發(fā)Electron應(yīng)用 背景

由于工作內(nèi)容大多是一些日常活動(dòng)，雖然活動(dòng)都以已經(jīng)做好模板為主，實(shí)際并不需要什么開發(fā)量，一般都是調(diào)一下按鈕的位置、顏色、字體大小什么的就可以立即發(fā)布，但是運(yùn)營(yíng)覺得活動(dòng)什么都要經(jīng)過開發(fā)才能發(fā)布，影響他們的運(yùn)營(yíng)效率（╮(╯▽╰)╭ ），開始下達(dá)開發(fā)指令：希望能夠模塊化，通過拖拉就可以生成一個(gè)活動(dòng)（°(°ˊДˋ°) ° 大致可以理解為類型MAKA這樣生成H5的工具），好吧，么有交互，么有設(shè)計(jì)，給你這么大的空間，好好發(fā)揮，搞好加雞腿。╮(╯▽╰)╭一臉懵逼，表示么有做過，得回去好好思考一下。。。

Electron大法好

經(jīng)過一段時(shí)間深入思考（掙扎糾結(jié)良久，快吐血了），(╯▔＾▔)╯覺得使用Electron搞能夠最大程度降低難度（本來也想做成后臺(tái)應(yīng)用的，但是我的直覺告訴我，怎么簡(jiǎn)單怎么來），能用web技術(shù)開發(fā)（效率扛扛），能利用巨多的nodejs模塊（支持大大的好），能夠擺脫兼容性問題（只需兼容一個(gè)瀏覽器，是一個(gè)啊，聽著都幸福）。以上就是選擇Electron開發(fā)的原因。

如何更新

既然要做成客戶端，更新是個(gè)大問題，如果整個(gè)應(yīng)用更新，基本開發(fā)完之后打包壓縮72M（沒有做任何優(yōu)化，依賴的包比較多，node_modules壓縮后也有20M），應(yīng)該算是很大的了。如果第一次分發(fā)倒是沒啥問題，但是每次都這樣整個(gè)應(yīng)用讓運(yùn)營(yíng)手動(dòng)更新，運(yùn)營(yíng)肯定不爽，必須得搞個(gè)自動(dòng)更新方案出來。
在Github看了一遍文檔，是有專門一節(jié)介紹自動(dòng)更新的傳送門，Electron團(tuán)隊(duì)也很貼心，給了一系列的解決方案，只是感覺自己用不上那么高大上的技術(shù)（我只需要更簡(jiǎn)單一點(diǎn)就可以了），好(╯▔＾▔)╯，決定自己擼一套出來。
首先利用electron-packager，打包出來的Electron應(yīng)用（因?yàn)楣径际莣indows，只針對(duì)windows打包即可，但是打包過程也是相當(dāng)耗時(shí)，時(shí)間大多耗在復(fù)制node_modules文件夾），很容易就發(fā)現(xiàn)electron-packager生成其實(shí)就是一個(gè)模板，每次內(nèi)容改變就只是resources文件夾下面的內(nèi)容改變而已，如果我們不需要復(fù)制node_modules的文件夾的內(nèi)容，打包速度會(huì)提高很多（其實(shí)一般來說node_modules也不會(huì)經(jīng)常改變），開始設(shè)想把node_modules 和 src(代碼)分開打包，這樣以后更新的話，只更新src目錄也相當(dāng)快。

ASAR文件

在看Electron文檔時(shí)，看到了Electron內(nèi)部是支持一種叫asar格式的文件，那asar到底是一種什么樣的格式呢，Github的官方介紹是這樣的：

Asar is a simple extensive archive format, it works like tar that concatenates all files together without compression, while having random access support.

可見這種文件格式只是簡(jiǎn)單把文件整理到一起，并沒有壓縮，可以當(dāng)做它是一個(gè)文件夾來訪問里面的文件，還有很重要的一點(diǎn)，你只能讀取不能寫入。
有了這種文件格式就提供了一個(gè)思路，把node_modules 和 src 分別打包成node_modules.asar 和 src.asar，當(dāng)應(yīng)用啟動(dòng)的時(shí)候直接require對(duì)應(yīng)src.asar文件，在src.asar里面的代碼再執(zhí)行創(chuàng)建窗口和加載頁面。
然后應(yīng)用更新也只更新node_modules.asar 和 src.asar這兩個(gè)文件，這樣的話，整體的更新粒度是縮小了，當(dāng)然你如果有更高的要求要做到那種更小粒度（針對(duì)代碼某個(gè)文件級(jí)別的更新）可能得再思考一下了，但是在我當(dāng)前的場(chǎng)景下是足夠用了。

一點(diǎn)小問題

還有一點(diǎn)小問題，src.asar里面的代碼怎么尋找到node_modules.asar里面的模塊尼，換句話說就是怎么把node_modules.asar放到模塊的查找路徑上，這里貼一下我所使用的方法:

require("module").globalPaths.unshift(require("path").join(process.cwd(), "resources/node_modules.asar"));

只要加到globalPaths上，且放到第一個(gè)（查找更快點(diǎn)）。

根據(jù)這樣的更新方案，項(xiàng)目的目錄結(jié)構(gòu)也得做一點(diǎn)改變，在我的項(xiàng)目下主要三個(gè)文件夾：app，node_modules，src。node_modules 和 src就不用多說，那現(xiàn)在的app目錄下的代碼到底要干些啥尼

1. 先檢查有沒有文件需要更新，如果有彈出更新窗口（代碼先請(qǐng)求一個(gè)manifest.json文件，里面有文件的MD5，用現(xiàn)有的文件做對(duì)比）
跳到2，沒有就跳到3
2. 依次下載對(duì)應(yīng)的文件，例如：src.asar.update, node_modules.asar.update，下載完成后，直接替換舊的文件
3. 最后require("src.asar").createApp()創(chuàng)建主界面，現(xiàn)在就能保證應(yīng)用啟動(dòng)時(shí)都是最新的代碼（只要下載沒出問題）

結(jié)束

就這樣一個(gè)簡(jiǎn)單的方案，運(yùn)營(yíng)也沒在抱怨更新麻煩，皆大歡喜。當(dāng)然面對(duì)真實(shí)用戶場(chǎng)景，應(yīng)該還有很多欠缺的地方，以后慢慢再學(xué)習(xí)改進(jìn)(╯▔＾▔)╯。