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中的devDependenciesdependencies中的內容(也就是你之前安裝過的全部模塊), 一次性重新安裝.

注:

某些模塊無法通過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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM