開發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的基礎部分這篇文章就跳過了，有興趣的話可以看這篇文章
如何使用
builder的使用和配置都是很簡單的builder配置有兩種方式
package.json中直接配置使用（比較常用，我們下面著重來講這個）- 指定
electron-builder.yml檔案
demo地址會在文章末尾給出（demo專案中electron使用得是V2.0.7版本,目前更高得是2.0.8版本）。
下面是一個簡單的package.json中帶註釋的配置
- 基礎配置
"build": {
// 這裡是electron-builder的配置 "productName":"xxxx",//專案名 這也是生成的exe檔案的字首名 "appId": "com.xxx.xxxxx",//包名 "copyright":"xxxx",//版權 資訊 "directories": {
// 輸出資料夾 "output": "build"
}, // windows相關的配置 "win": {
"icon": "xxx/icon.ico"//圖示路徑
}
}複製程式碼在配置檔案中加入以上的檔案之後就可以打包出來簡單的資料夾，資料夾肯定不是我們想要的東西。下一步我們來繼續講別的配置。2. 打包目標配置要打包成安裝程式的話我們有兩種方式，
- 使用NSIS工具對我們的資料夾再進行一次打包，打包成exe
- 通過electron-builder的nsis直接打包成exe，配置如下
"win": {
// 更改build下選項 "icon": "build/icons/aims.ico", "target": [ {
"target": "nsis" // 我們要的目標安裝包
} ]
},複製程式碼- 其他平臺配置
"dmg": {
// macOSdmg "contents": [ ... ]
}, "mac": {
// mac "icon": "build/icons/icon.icns"
}, "linux": {
// linux "icon": "build/icons"
}複製程式碼- 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對於處理安裝包這種東西，功能非常的強大。但是學習起來並不比一門高階語言要容易。其中的奧祕還要各位大佬自行探索
這裡上一些學習資源
- 關於作業系統的配置
主要是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" ]
} ]
}複製程式碼- 更新配置
下面這個是給更新用的配置，主要是為了生成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, --macos Build for macOS, [array] --linux, -l Build for Linux [array] --win, -w, --windows Build for Windows [array] --x64 Build for x64 (64位安裝包) [boolean] --ia32 Build for ia32(32位安裝包) [boolean] --armv7l Build for armv7l [boolean] --arm64 Build for arm64 [boolean] --dir Build 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(其他):
--help Show help [boolean] --version Show 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支援列表複製程式碼常見的錯誤
-
NPM下載的問題因為
NPM在國內比較慢。導致electron-V.xxxx.zip下載失敗。這些東西如果是第一次打包的話是需要下載對應electron版本的支援檔案。解決辦法有兩個- 設定映象：在C盤User中找到
.npmrc檔案。然後加入下面這句程式碼,但是這個有時候也不是很好用
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/複製程式碼- 直接去淘寶映象檔案庫找到對應的檔案並下載，放到指定的目錄下，electron的淘寶映象地址。下載完之後放到指定的檔案。一般檔案得地址在
C:\Users\Administrator\AppData\Local\electron\Cache。例如我要下載1.8.4版本的electron，那麼找到映象下得檔案然後放到指定資料夾中。
- 設定映象：在C盤User中找到
(如果是在執行npm install時下載不下來)直接在淘寶映象下載對應版本的zip，然後扔到C:\Users\YourUserName.electron就行
這就解決了這個問題，簡單又暴力。
-
NSIS下載問題如果你要打
NSIS得包還需要西再下載nsis-resources-xxx等等包。經過上面得經驗這下我們知道缺什麼就填什麼唄，通過錯誤日誌我們可以得到我們要下載得版本，一般錯誤中通常會展示github下載地址，直接點開連線去下載。但是位置這次不一樣了。因為這是electron-builder的支援環境所以我們要放在C:\Users\Administrator\AppData\Local\electron-builder\cache\nsis\下了。
一般情況下解決這些問題的思路就是，缺什麼拿什麼?。
總結
electron-builder是一個簡單又強大的庫。反正我是很服
原文地址 如果覺得有用得話給個⭐吧