用 electron-builder 建置 Windows 平台應用程式
前言
在先前的
初探Electron 裡建置了 Electron 的基本環境，雖然可以透過 npm 來執行，但如果要發佈程式給一般使用者時這個方法就不專業了， Electron 目前有 electron-packager 和 electron-builder 兩個套件可以提供打包，這次我選擇 electron-builder 來進行打包，並把學習的過程做個紀錄。
內容
首先建立一個基本的 Electron 的基本執行環境，可以參考之前的
初探Electron 與
Electron4的使用範例 ，這裡就不再詳細解說。建立好基本執行環境後就可以安裝 electron-builder 套件，
到專案的 root 資料夾下，輸入以下命令
npm install electron-builder
安裝完套件後，將原本的 package.json 修改如下
{
"name": "electronbuildertest",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
},
"build": {
"appId": "com.xxx.app.electronbuildertest",
"productName": "electron-builder_test",
"directories": {
"output": "build"
},
"win": {
}
},
"devDependencies": {
"electron": "^6.0.0",
"electron-builder": "^21.2.0"
}
}
紅字的地方為需要修改的部分，在 scripts 新增 "pack"與"dist"兩道命令， dependencies 的部分如果有 electron 與 electron-builder 的話，請將內容移到 devDependencies 裡，這是因為 electron-builder 在打包時不允許上述套件有相依。 build 的部分 appId 與 productName，可以自己命名，directories 是設定打包後的資料放置位置， win 的部分指的是打包 windows 平台時的參數，不寫會用預設的。
接下來就是打包，在專案的 root 資料夾下，輸入以下
npm run dist
執行完後，可以在專案 root 資料夾下的 build 資料夾看到以下
 |
| electron-builder 建置 Windows 平台的安裝檔 |
在圖中可以看到 win-unpacked 資料夾，裡面有執行檔可以直接看結果，當然要透過安裝檔看結果也可以。
一般的程式通常會需要有自己的資料，這些資料 electron-builder 並不會自己打包，要在 package.json 裡面註記才行，這裡建議把程式所需的資料都放在同一個資料夾，這樣就不用每次新增或刪除資料都要動到 package.json 。這裡提供一個範例是打包資料夾的範例，首先修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
我們用了 node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
以及 Electron <script>document.write(process.versions.electron)</script>.
<img src="./ProjectData/img/test.png"></img>
</body>
</html>
修改的部分很簡單就是新增一個 Image ，它會去讀取 ./ProjectData/img/test.png ，請產生對應的資料夾與檔案，接著修改 package.json 如下
{
"name": "electronbuildertest",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
},
"build": {
"appId": "com.xxx.app.electronbuildertest",
"productName": "electron-builder_test",
"directories": {
"output": "build"
},
"extraFiles": [
{
"from": "ProjectData",
"to": ""
}
],
"win": {
}
},
"devDependencies": {
"electron": "^6.0.0",
"electron-builder": "^21.2.0"
}
}
紅字的部分為新增 ProjectData 為打包資料夾，這個部分的命名可以自由更改，更改完再打包一次就可以看到結果。
參考資料
electron-builder 官網
Michael_Jheng的部落格
相關文章
初探Electron
Electron4的使用範例
