上一篇[Electron學習筆記]Electron安裝檔打包攻略是以grunt來完成electron安裝檔,但中間打包過程有點複雜繁瑣,而electron-builder將grunt許多安裝過程做了大幅度的省略,接下來講解electron-builder方法
#Step One: 到Electron GitHub載點下載Electron程式集,下載完成解完壓縮後,開啟Visual Studio Code這軟體來安裝並執行Electron,
在終端機依次輸入
cd electron-quick-start
npm install && npm start
顯示結果如下,
#Step Two: 在終端機輸入npm install electron-builder --save-dev來安裝electron-builder,安裝完成會在package.json出現electron-builder與版本
#Step Three: 在devDependencies下方新增"build",如下所示,
"build": {
"appId": "com.cilent.app.electronbuild",
"productName": "electron-build",
"directories": {
"output": "build"
},
"mac": {
"icon": "icons/Mushroom.ico"
},
"win": {
"icon": "icons/Mushroom.ico"
},
"linux": {
"icon": "icons/Mushroom.ico"
}
}
#Step Four: 在"scripts"新增以下兩條指令,
"pack": "electron-builder --dir",
"dist": "electron-builder"
pack為打包成執行檔
dist為打包成執行檔與安裝檔
關於electron-builder其他詳細可上此連結查詢electron-builder - npm
#Step Five: 在終端機輸入npm run dist把Electron打包成安裝檔,打包過程如下,
完成後會產生出build資料夾,如下所示,
裡頭內容如下,
點擊electron-build Setup 1.0.0.exe即可進行安裝,安裝畫面如下,
安裝完會自動執行程式,如下所示,
在電腦桌面有出現捷徑,如下所示,
在所有程式會找到,
在應用程式與功能會找到,
此安裝檔無法選擇安裝路徑,預設安裝路徑為\AppData\Local\Programs,
留言列表
