electron教程(四): 使用electron-builder或electron-packager將專案打包為可執行桌面程式(.exe)
我的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"如圖所示:
:%20%E4%BD%BF%E7%94%A8electron-builder%E6%88%96electron-packager%E5%B0%86%E9%A1%B9%E7%9B%AE%E6%89%93%E5%8C%85%E4%B8%BA%E5%8F%AF%E6%89%A7%E8%A1%8C%E6%A1%8C%E9%9D%A2%E7%A8%8B%E5%BA%8F(.exe)/123412naisdlngfliawendfl12.png)
你可以在electron-packager的github上查詢該指令碼支援的所有的引數.
4. 打包
執行指令:
npm run packager:%20%E4%BD%BF%E7%94%A8electron-builder%E6%88%96electron-packager%E5%B0%86%E9%A1%B9%E7%9B%AE%E6%89%93%E5%8C%85%E4%B8%BA%E5%8F%AF%E6%89%A7%E8%A1%8C%E6%A1%8C%E9%9D%A2%E7%A8%8B%E5%BA%8F(.exe)/87968a1a30283ded0e0119f17aa12a3.png)
如果順利的話, 會出現打包成功的提示, 專案的根目錄下出現outputs目錄, 該目錄下有testapp-win32-x64目錄, 此目錄下有若干檔案, 包括testapp.exe可執行程式.
注:
outputs目錄的名字是我們在packager指令碼中指定的testapp-win32-x64的名字是因為我們指定了生成win平臺下的程式, 如果你指定生成linux和mac平臺下, 就會出現針對該平臺的目錄.testapp.exe同樣是我們在packager指令碼中指定的名字
:%20%E4%BD%BF%E7%94%A8electron-builder%E6%88%96electron-packager%E5%B0%86%E9%A1%B9%E7%9B%AE%E6%89%93%E5%8C%85%E4%B8%BA%E5%8F%AF%E6%89%A7%E8%A1%8C%E6%A1%8C%E9%9D%A2%E7%A8%8B%E5%BA%8F(.exe)/87968a1a30283ded12414252a32.png)
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"如下圖所示:
:%20%E4%BD%BF%E7%94%A8electron-builder%E6%88%96electron-packager%E5%B0%86%E9%A1%B9%E7%9B%AE%E6%89%93%E5%8C%85%E4%B8%BA%E5%8F%AF%E6%89%A7%E8%A1%8C%E6%A1%8C%E9%9D%A2%E7%A8%8B%E5%BA%8F(.exe)/2124512423524652dfsgbsdfg.png)
4. 打包
執行命令, 編譯:
yarn postinstall再執行命令, 打包:
yarn dist