1.JPG

上一篇[Electron學習筆記]Electron安裝檔打包攻略是以grunt來完成electron安裝檔,但中間打包過程有點複雜繁瑣,而electron-buildergrunt許多安裝過程做了大幅度的省略,接下來講解electron-builder方法

#Step One: 到Electron GitHub載點下載Electron程式集,下載完成解完壓縮後,開啟Visual Studio Code這軟體來安裝並執行Electron,

Visual Studio Code官方網站

在終端機依次輸入

cd electron-quick-start

npm install && npm start

顯示結果如下,

4.JPG

#Step Two: 在終端機輸入npm install electron-builder --save-dev來安裝electron-builder,安裝完成會在package.json出現electron-builder與版本

1.JPG

 

#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"
    }
  }

2.JPG

#Step Four: 在"scripts"新增以下兩條指令,

"pack": "electron-builder --dir",

"dist": "electron-builder"

3.JPG

pack為打包成執行檔

dist為打包成執行檔與安裝檔

關於electron-builder其他詳細可上此連結查詢electron-builder - npm

#Step Five: 在終端機輸入npm run dist把Electron打包成安裝檔,打包過程如下,

4.JPG

完成後會產生出build資料夾,如下所示,

5.JPG

裡頭內容如下,
6.JPG

點擊electron-build Setup 1.0.0.exe即可進行安裝,安裝畫面如下,

7.jpg

安裝完會自動執行程式,如下所示,

14.JPG

在電腦桌面有出現捷徑,如下所示,

12.JPG

在所有程式會找到,

13.jpg

在應用程式與功能會找到,

14.JPG

此安裝檔無法選擇安裝路徑,預設安裝路徑為\AppData\Local\Programs,

8.JPG

arrow
arrow

    鄭智遠 發表在 痞客邦 留言(1) 人氣()