electron-builder打包見解

摘要： 開發electron客戶端程式，打包是繞不開的問題。下面就我在工作中的經驗以及目前對electron-builder 的瞭解來分享一些心得。 基本概念 官網的定義 A complete solution to package and build a ready ...

開發electron客戶端程式，打包是繞不開的問題。下面就我在工作中的經驗以及目前對electron-builder 的瞭解來分享一些心得。

基本概念

官網的定義

A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box.

關於electron 和electron-builder 的基礎部分這篇文章就跳過了，有興趣的話可以看ofollow,noindex">這篇文章

如何使用

builder的使用和配置都是很簡單的 builder配置有兩種方式

package.json
electron-builder.yml

demo地址會在文章末尾給出（demo專案中electron 使用得是V2.0.7 版本,目前更高得是2.0.8 版本）。

下面是一個簡單的package.json 中帶註釋的配置

1. 基礎配置

"build": {// 這裡是electron-builder的配置
"productName":"xxxx",//專案名 這也是生成的exe檔案的字首名
"appId": "com.xxx.xxxxx",//包名
"copyright":"xxxx",//版權資訊
"directories": { // 輸出資料夾
"output": "build"
}, 
// windows相關的配置
"win": {
"icon": "xxx/icon.ico"//圖示路徑 
}
}
複製程式碼

在配置檔案中加入以上的檔案之後就可以打包出來簡單的資料夾，資料夾肯定不是我們想要的東西。下一步我們來繼續講別的配置。 2. 打包目標配置 要打包成安裝程式 的話我們有兩種方式，

1. 使用NSIS工具對我們的資料夾再進行一次打包，打包成exe
2. 通過electron-builder的nsis直接打包成exe，配置如下

"win": {// 更改build下選項
"icon": "build/icons/aims.ico",
"target": [
{
"target": "nsis" // 我們要的目標安裝包
}
]
},
複製程式碼

3. 其他平臺配置

"dmg": { // macOSdmg
"contents": [
...
]
},
"mac": {// mac
"icon": "build/icons/icon.icns"
},
"linux": { // linux
"icon": "build/icons"
}
複製程式碼

4. nsis配置

這個要詳細的講一下，這個nsis的配置指的是安裝過程的配置，其實還是很重要的，如果不配置nsis那麼應用程式就會自動的安裝在C盤。沒有使用者選擇的餘地，這樣肯定是不行的

關於nsis的配置是在build中nsis這個選項中進行配置，下面是部分nsis配置

"nsis": {
"oneClick": false, // 是否一鍵安裝
"allowElevation": true, // 允許請求提升。 如果為false，則使用者必須使用提升的許可權重新啟動安裝程式。
"allowToChangeInstallationDirectory": true, // 允許修改安裝目錄
"installerIcon": "./build/icons/aaa.ico",// 安裝圖示
"uninstallerIcon": "./build/icons/bbb.ico",//解除安裝圖示
"installerHeaderIcon": "./build/icons/aaa.ico", // 安裝時頭部圖示
"createDesktopShortcut": true, // 建立桌面圖示
"createStartMenuShortcut": true,// 建立開始選單圖示
"shortcutName": "xxxx", // 圖示名稱
"include": "build/script/installer.nsh", // 包含的自定義nsis指令碼 這個對於構建需求嚴格得安裝過程相當有用。
"script" : "build/script/installer.nsh" // NSIS指令碼的路徑，用於自定義安裝程式。 預設為build / installer.nsi
},
複製程式碼

關於include 和script 到底選擇哪一個 ？

在對個性化安裝過程需求並不複雜，只是需要修改一下安裝位置，解除安裝提示等等的簡單操作建議使用include 配置,如果你需要炫酷的安裝過程，建議使用script 進行完全自定義。

NSIS 對於處理安裝包這種東西，功能非常的強大。但是學習起來並不比一門高階語言要容易。其中的奧祕還要各位大佬自行探索

這裡上一些學習資源

• NSIS初級篇
• NSIS 打包指令碼基礎
• 示例指令碼
• NSIS論壇

5. 關於作業系統的配置

主要是windows中64和32位的配置

CLI引數

electron-builder --ia32 // 32位
electron-builder// 64位(預設)
複製程式碼

nsis中配置

"win": {
"icon": "build/icons/aims.ico",
"target": [
{
"target": "nsis",
"arch": [ // 這個意思是打出來32 bit + 64 bit的包，但是要注意：這樣打包出來的安裝包體積比較大，所以建議直接打32的安裝包。
"x64", 
"ia32"
]
}
]
}
複製程式碼

6. 更新配置

下面這個是給更新用的配置，主要是為了生成lastest.yaml 配置檔案

"publish": [
{
"provider": "generic", // 伺服器提供商 也可以是GitHub等等
"url": "http://xxxxx/" // 伺服器地址
}
],
複製程式碼

完整配置

基本上可用的完整的配置

"build": {
"productName":"xxxx",//專案名 這也是生成的exe檔案的字首名
"appId": "com.leon.xxxxx",//包名
"copyright":"xxxx",//版權資訊
"directories": { // 輸出資料夾
"output": "build"
}, 
"nsis": {
"oneClick": false, // 是否一鍵安裝
"allowElevation": true, // 允許請求提升。 如果為false，則使用者必須使用提升的許可權重新啟動安裝程式。
"allowToChangeInstallationDirectory": true, // 允許修改安裝目錄
"installerIcon": "./build/icons/aaa.ico",// 安裝圖示
"uninstallerIcon": "./build/icons/bbb.ico",//解除安裝圖示
"installerHeaderIcon": "./build/icons/aaa.ico", // 安裝時頭部圖示
"createDesktopShortcut": true, // 建立桌面圖示
"createStartMenuShortcut": true,// 建立開始選單圖示
"shortcutName": "xxxx", // 圖示名稱
"include": "build/script/installer.nsh", // 包含的自定義nsis指令碼
},
"publish": [
{
"provider": "generic", // 伺服器提供商 也可以是GitHub等等
"url": "http://xxxxx/" // 伺服器地址
}
],
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/aims.ico",
"target": [
{
"target": "nsis",
"arch": [
"ia32"
]
}
]
},
"linux": {
"icon": "build/icons"
}
}
複製程式碼

命令列引數（CLI）

Commands(命令):

electron-builder build構建命名[default]
electron-builder install-app-deps下載app依賴
electron-builder node-gyp-rebuild重建自己的本機程式碼
electron-builder create-self-signed-cert為Windows應用程式建立自簽名程式碼簽名證書
electron-builder start使用electronic-webpack在開發模式下執行應用程式(須臾要electron-webpack模組支援)
複製程式碼

Building(構建引數):

--mac, -m, -o, --macosBuild for macOS,[array]
--linux, -lBuild for Linux[array]
--win, -w, --windowsBuild for Windows[array]
--x64Build for x64 (64位安裝包)[boolean]
--ia32Build for ia32(32位安裝包)[boolean]
--armv7lBuild for armv7l[boolean]
--arm64Build for arm64[boolean]
--dirBuild unpacked dir. Useful to test.[boolean]
--prepackaged, --pd預打包應用程式的路徑（以可分發的格式打包）
--projectDir, --project專案目錄的路徑。 預設為當前工作目錄。
--config, -c配置檔案路徑。 預設為`electron-builder.yml`（或`js`，或`js5`)

複製程式碼

Publishing(釋出):

--publish, -p釋出到GitHub Releases [choices: "onTag", "onTagOrDraft", "always", "never", undefined]
複製程式碼

Deprecated(廢棄):

--draft請改為在GitHub釋出選項中設定releaseType[boolean]
--prerelease請改為在GitHub釋出選項中設定releaseType[boolean]
--platform目標平臺 (請更改為選項 --mac, --win or --linux)
[choices: "mac", "win", "linux", "darwin", "win32", "all", undefined]
--arch目標arch (請更改為選項 --x64 or --ia32)
[choices: "ia32", "x64", "armv7l", "arm64", "all", undefined]
複製程式碼

Other(其他):

--helpShow help[boolean]
--versionShow version number[boolean]
複製程式碼

Examples(例子):

electron-builder -mwl為macOS，Windows和Linux構建（同時構建）
electron-builder --linux deb tar.xz為Linux構建deb和tar.xz
electron-builder -c.extraMetadata.foo=bar將package.js屬性`foo`設定為`bar`
electron-builder --config.nsis.unicode=false 為NSIS配置unicode選項

複製程式碼

TargetConfiguration(構建目標配置):

target:String - 目標名稱，例如snap.
arch “x64” | “ia32” | “armv7l” | “arm64”> | “x64” | “ia32” | “armv7l” | “arm64”-arch支援列表
複製程式碼