Electron-製做程序安裝包

目標

1. 瞭解如何把編寫的程序封裝成可執行程序

2. 瞭解安裝包的原理以及生成方法

3. 瞭解程序迭代升級的流程以及接入方法

程序封裝

當應用開發完成後，爲了方便使用者的運行，咱們須要把源碼封裝成一個可運行的程序

第一步，瞭解概念

asar

從 Electron 的官方文檔能夠了解到 asar 是一種將多個文件合併成一個文件的類 tar 風格的歸檔格式。 Electron 能夠無需解壓整個文件，便可從其中讀取任意文件內容。

咱們的目標是，將編寫好的源碼封裝成一個 .asar 的文件，可讓 Electron 直接運行。

第二步，安裝工具

全局安裝 asar 命令行工具

npm install -g asar
複製代碼

第三步，經過 asar 命令生成 .asar 文件

假設咱們的源碼所在目錄爲 /projects/electron-app， 在目錄 /projects 下，執行以下命令

asar pack ./electron-app app.asar
複製代碼

順利完成後，咱們能夠在當前目錄下獲得 app.asar文件

第四步，驗證 asar 文件是否可用

這一步驟主要是爲了向各位看官解釋爲何要生成 asar 文件

Electron 應用下會有一個文件夾 名爲 Resources，把生成的 app.asar 文件拷貝到該目錄下，再雙擊打開 Electron 應用，Electron 則會自動運行 app.asar 裏面的內容。

Windows 系統下，能夠直接在 Electron 應用的目錄下找到 Resources 文件夾，mac 系統下，咱們只能看到 Electron 應用目錄下只有一個 Electron.app 圖標，不要着急，右擊 Electron.app，選擇 「顯示包內容」，便可看到 Resource 文件夾

總結

至此不難想象，其實咱們已經能夠得到了能夠發佈給其餘人直接運行的應用了。

若是想修改應用圖標 和 名稱，修改 **Electron 執行文件(Electron.exe 或者 Electron.app)**的 名稱 和 圖標便可。

咱們只須要把上述的 Electron.app（Windows的話，是Electron應用目錄下的全部內容） 打包成一個壓縮包，便可發給使用者，使用者解壓完壓縮包後，直接運行裏面的 Electron.app 或者 Electron.exe 便可。

以上就是 Electron 應用封裝的基礎原理，不管是何種方式的程序封裝或者安裝包打包方案，都離不開上述的過程與原理，都是針對 壓縮、解壓 等流程的高度化封裝 與 自動化運行。

生成安裝包

截至 2018-12-21， 流行的安裝包生成有以下幾種：

1. NSIS

2. electron-packager

3. electron-builder

4. grunt-electron-installer

解釋

1. NSIS 與 grunt-electron-installer 只能打包出 Windows 平臺下的安裝包， NSIS 能夠對安裝包的流程，安裝界面高度定製化；grunt-electron-installer 打包出來的可執行文件，雙擊打開後直接安裝 並 生成快捷方式

2. electron-packager 支持輸出多個平臺（Linux、mac、Windows）的可執行文件，能夠理解爲 「程序封裝」 步驟的自動化工具，嚴格意義上並非輸出安裝包

3. electron-builder 幾乎支持全部平臺全部格式（Docker也支持），針對macOS系統，能夠打包出 .dmg 安裝文件，針對 Windows系統，能夠打包出 .exe 或者 .msi 安裝文件。能夠生成 雙擊自動安裝 並 建立程序運行入口 的安裝應用，也能夠生成基於 NSIS 的定製化安裝過程的安裝應用。

推薦方案

electron-builder

緣由：electron-builder 已經提供了很是成熟的打包方案，面向各個平臺，各類格式，同時也很是容易上手。

舉例：

1. 準備好源碼

   

2. 在 package.json 準備好打包配置

   

   解釋：

   "build"：electron-builder 使用的配置信息；

   "dependencies.ref"：項目引用的原生模塊，在被打包的時候，會被自動從新編譯，ref 模塊在 main.js 中被引入，若是編譯失敗，在運行時會失敗；

   "directories.output"：打包完成後，輸出目錄；

   "buildVersion"：應用對應的版本信息，該信息會被整合到安裝包中去；

   "electronVersion"：目標 electron 版本；

3. 運行命令進行打包

   

   

   解釋：

   在 package.json 的 script 中準備好打包命令，參數 --mac 意味着目標平臺是 macOS，參數 --64 意味着目標版本是64位應用

   在圖中能夠看到，咱們在 build 配置中設置了目標 electron 版本爲 3.0.13，electron-builder 自動下載 electron-3.0.13 版本，並自動按照目標版本自動編譯了原生模塊 ref

4. 檢查打包輸出

   

   

   解釋：

   打包自動輸出到當前目錄的 build 目錄下，默認輸出了 .zip、.dmg 和 直接可運行的 .app 文件；

   雙擊打開 mac 目錄下的 electron-quick-start.app，順利打開應用，同時，Electron 的版本爲 3.0.13；

總結

推薦直接使用 electron-builder 工具，若是目標系統是 Windows 且須要高度定製化安裝流程以及安裝界面，能夠考慮使用 自定義 NSIS 或者 使用 electron-builder 工具自帶的 NSIS 方案。

electron-builder 工具文檔 很是詳盡，看官們能夠依照 electron-builder 的官方教程 和 本身的實際須要，快速生成安裝包和應用。

額外補充一點，不管是哪種安裝包生成方案，都離不開應用封裝的原理，看官們若是感興趣的話，能夠嘗試基於 Electron 框架，編寫一個高度定製的安裝程序，安裝程序 再 進行其餘應用的安裝。

關於升級

Electron 官方提供了 自動升級的檢查與運行機制，參考文檔：Electron AutoUpdate

Electron 官方與第三方已經提供了不少不一樣的方案進行升級（具體方案不進行詳述），各位看官能夠根據本身的需求選擇合適的方案實現升級。若是現成的方案都不能知足需求，看官們在已經瞭解了 應用封裝的原理後，徹底能夠本身實現一套應用更新的機制。

注意點

1. Don’t expect that you can build app for all platforms on one platform. -- 不要嘗試在一個平臺上，爲不一樣的平臺生成安裝包或者應用，目前來講這不可行

2. asar 限制：有一些特性，在源碼上能夠正常工做，可是當源碼打包成 asar 後，則不能正常工做。這些限制須要提早留意，詳情查看 Electron 官方文檔