electron教程(一): electron的安裝和項目的建立html
electron教程(番外篇一): 開發環境及插件, VSCode調試, ESLint + Google JavaScript Style Guide代碼規範node
electron教程(番外篇二): 使用TypeScript版本的electron, VSCode調試TypeScript, TS版本的ESLintlinux
electron教程(二): http服務器, ws服務器, 子進程管理git
electron教程(三): 使用ffi-napi引入C++的dllgithub
electron教程(四): 使用electron-builder或electron-packager將項目打包爲可執行桌面程序(.exe)npm
本篇將介紹如何將你開發的electron項目(main.js), 打包成一個可執行桌面程序(.exe).json
有兩個流行的工具能夠作到這一點: electron-builder
和 electron-packager
.api
我不會詳細地對比二者的優劣, 但會經過三個事實來幫助你選擇合適的工具.服務器
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教程(一): electron的安裝和項目的建立所介紹的內容.
執行指令:
yarn add electron-packager --save-dev
//FIXME todo:由於我優化了項目目錄, 把main.js和其餘js移動到了src文件夾中, index.html及lib移動到了html中, 因此腳本中的目錄可能須要一些修改
在package.json中的scripts
中, 添加以下內容:
"packager": "electron-packager ./ testapp --win --out ./outputs"
如圖所示:
你能夠在electron-packager的github上查找該腳本支持的全部的參數.
執行指令:
npm run packager
若是順利的話, 會出現打包成功的提示, 項目的根目錄下出現outputs
目錄, 該目錄下有testapp-win32-x64
目錄, 此目錄下有若干文件, 包括testapp.exe
可執行程序.
注:
outputs
目錄的名字是咱們在packager腳本中指定的
testapp-win32-x64
的名字是由於咱們指定了生成win平臺下的程序, 若是你指定生成linux和mac平臺下, 就會出現針對該平臺的目錄.
* testapp.exe
一樣是咱們在packager腳本中指定的名字
第一次執行打包指令的時候, 會很是很是的慢, 甚至可能會失敗, 一般的緣由以下:
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
.
注:
由於我本身的項目中, 使用了ffi-napi
. 因此我只能選擇electron-packager
做爲打包工具.
在這裏electron-builder
只是簡單的介紹了使用流程, 若是你在使用中遇到了什麼問題, 能夠參考electron-packager
中的解決方案, 或者留言告訴我.
electron教程(一): electron的安裝和項目的建立
執行指令:
yarn add electron-builder --save-dev
在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"
以下圖所示:
執行命令, 編譯:
yarn postinstall
再執行命令, 打包:
yarn dist