electron教程(四): 使用electron-builder或electron-packager將項目打包爲可執行桌面程序(.exe)

個人electron教程系列

electron教程(一): electron的安裝和項目的建立

electron教程(番外篇一): 開發環境及插件, VSCode調試, ESLint + Google JavaScript Style Guide代碼規範

electron教程(番外篇二): 使用TypeScript版本的electron, VSCode調試TypeScript, TS版本的ESLint

electron教程(二): http服務器, ws服務器, 子進程管理

electron教程(三): 使用ffi-napi引入C++的dll

electron教程(四): 使用electron-builder或electron-packager將項目打包爲可執行桌面程序(.exe)

 

引言

本篇將介紹如何將你開發的electron項目(main.js), 打包成一個可執行桌面程序(.exe).

有兩個流行的工具能夠作到這一點: electron-builder 和 electron-packager.

我不會詳細地對比二者的優劣, 但會經過三個事實來幫助你選擇合適的工具.

1. electron-builder的Star爲7.7k, electron-packager的Star爲6.6k.
2. 根據electron-builder的做者介紹, electron-builder打包後會比electron-packager更小, 還能夠經過捐款來讓做者優先幫你解決問題.
3. electron-builder不支持node原生模塊和二進制模塊, 全部這類型的模塊在打包的過程當中, 都會經歷一次electron-rebuild, 被編譯成electron模塊. 這個機制引入了一些問題: 某些模塊沒法經過electron-rebuild編譯, ffi-napi就是其中之一, 因此若是你的項目想要經過引入ffi-napi來使用C++的dll, 就只能選擇electron-packager進行打包了.

 

electron-packager

 

1. 部署node.js+electron環境

按步驟完成electron教程(一): electron的安裝和項目的建立所介紹的內容.

 

2. 安裝electron-packager

執行指令:

yarn add electron-packager --save-dev

 

3. 在package.json中添加打包腳本

//FIXME todo:由於我優化了項目目錄, 把main.js和其餘js移動到了src文件夾中, index.html及lib移動到了html中, 因此腳本中的目錄可能須要一些修改

在package.json中的scripts中, 添加以下內容:

"packager": "electron-packager ./ testapp --win --out ./outputs"

如圖所示:

你能夠在electron-packager的github上查找該腳本支持的全部的參數.

 

4. 打包

執行指令:

npm run packager

若是順利的話, 會出現打包成功的提示, 項目的根目錄下出現outputs目錄, 該目錄下有testapp-win32-x64目錄, 此目錄下有若干文件, 包括testapp.exe可執行程序.

注:

 outputs目錄的名字是咱們在packager腳本中指定的
 testapp-win32-x64的名字是由於咱們指定了生成win平臺下的程序, 若是你指定生成linux和mac平臺下, 就會出現針對該平臺的目錄.
* testapp.exe一樣是咱們在packager腳本中指定的名字

 

4.1. 打包過程當中會遇到的問題

第一次執行打包指令的時候, 會很是很是的慢, 甚至可能會失敗, 一般的緣由以下:

下載速度太慢

electron-packager在當前機器的首次打包的時候，會下載electron的預編譯文件至當前用戶目錄，而electron-prebuilder的默認源在國外，在網絡很差的狀況下，即使有代理，速度也會很是慢。

可選的方案以下:

* 使用代理 

* 更換阿里鏡像源 (成功率不高)

在執行打包腳本前, 先執行指令, 指定從阿里的鏡像源來下載electron預編譯文件:

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

* 使用cnpm (成功率較高, 但會引起別的問題, 以下)

用下面的指令替換npm run packager:

cnpm run packager

* cnpm致使文件過大

若是你在項目構建過程當中, 是經過cnpm來安裝模塊的, 會致使你項目中的node_muduoles體積很是大.

使用cnpm安裝模塊, 會致使全部的包都是扁平化的安裝, node_modules中會有很是多的文件, 直接致使了electron-packager打包很是的慢.

而npm和yarn安裝時, 全部的包都是樹狀解構的, 層級變深, 可是打包速度會快不少.

若是你已經使用cnpm安裝過某些模塊, 建議你刪除這些模塊, 以及這些模塊的依賴, 從新使用npm和yarn安裝.

一個技巧能夠幫你快速完成上述步驟:

將項目根目錄的node_modules完全刪除, 而後執行指令:

yarn install

該指令會讀取項目目錄下package.json中的devDependencies和dependencies中的內容(也就是你以前安裝過的所有模塊), 一次性從新安裝.

注: 

某些模塊沒法經過yarn安裝, 好比ffi-napi, 若是你但願刪除node_modules後利用package.json從新安裝, 按照以下步驟便可:

1. 刪除沒法yarn的模塊: 在package.json中, 將ffi-napi的內容刪除.
2. yarn安裝其餘模塊: 經過yarn install先安裝其餘模塊.
3. 手動安裝該模塊: 執行npm i ffi-napi從新安裝ffi-napi.

 

electron-builder

 

注:

由於我本身的項目中, 使用了ffi-napi. 因此我只能選擇electron-packager做爲打包工具.

在這裏electron-builder只是簡單的介紹了使用流程, 若是你在使用中遇到了什麼問題, 能夠參考electron-packager中的解決方案, 或者留言告訴我.

 

1. 部署node.js+electron環境

electron教程(一): electron的安裝和項目的建立

 

2. 安裝electron-builder

執行指令:

yarn add electron-builder --save-dev

 

3. 在package.json中添加打包腳本

在package.json中, 添加以下內容:

  "build": {
    "appId": " your.id ",
    "mac": {
        "category": " your.app.category.type "
    }
  },

在scripts中, 添加以下內容:

    "pack": " electron-builder --dir ",
    "dist": " electron-builder --win --x64",
    "postinstall": "electron-builder install-app-deps"

以下圖所示:

 

4. 打包

執行命令, 編譯:

yarn postinstall

再執行命令, 打包:

yarn dist