electron教程(四): 使用electron-builder或electron-packager將項目打包為可執行桌面程序(.exe)
- 2019 年 10 月 10 日
- 筆記
我的electron教程系列
electron教程(一): electron的安裝和項目的創建
electron教程(二): http服務器, ws服務器, 子進程管理
electron教程(三): 使用ffi-napi引入C++的dll
electron教程(四): 使用electron-builder或electron-packager將項目打包為可執行桌面程序(.exe)
引言
本篇將介紹如何將你開發的electron項目(main.js), 打包成一個可執行桌面程序(.exe).
有兩個流行的工具可以做到這一點: electron-builder 和 electron-packager.
我不會詳細地對比兩者的優劣, 但會通過三個事實來幫助你選擇合適的工具.
electron-builder的Star為7.7k,electron-packager的Star為6.6k.- 根據
electron-builder的作者介紹,electron-builder打包後會比electron-packager更小, 還可以通過捐款來讓作者優先幫你解決問題. 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中添加打包腳本
在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重新安裝, 按照如下步驟即可:
- 刪除無法yarn的模塊: 在
package.json中, 將ffi-napi的內容刪除. - yarn安裝其他模塊: 通過
yarn install先安裝其他模塊. - 手動安裝該模塊: 執行
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