前言
Electron 之所以能夠日益風靡，是因為其簡單易用且對各個操作平臺具有良好的支持。
今天我就來分享一下怎么使用一套代碼，快速打包生成各主流平臺安裝包的經驗。
項目安裝
首先，使用我前面介紹的提效小技巧，設置：
- NPM 源為淘寶鏡像源；
- Electron 源為中國鏡像網站中的 Electron 源地址。
然后依次執行以下指令：
mkdir my-electron
cd my-electron
npm init -y
npm install electron@14.2.6 -D
npm install @electron/remote --save
npm install electron-builder -D
打包配置
在 my-electron 目錄下的 package.json 中，添加打包配置：
{
"name": "my-electron",
"version": "0.1.0",
"author": "編程三昧",
"build": { // electron-builder配置
"productName":"myFirstApp",//項目名 這也是生成的exe文件的前綴名
"appId": "xxxxx",
"copyright":"xxxx",//版權信息
"directories": {
"output": "build" // 輸出文件夾
},
"extraResources": [{ // 需要讀寫的配置文件
"from": "./config/config.json",
"to": "../config/config.json"
}],
"win": {
"icon": "xxx/icon.ico"http://圖標路徑,
"target":[
{
"target": "nsis",
"arch": ["x64"]
}
]
},
"dmg": {
"contents": [
{
"x": 0,
"y": 0,
"path": "/Application"
}
]
},
"linux": {
"icon": "xxx/icon.ico"
},
"mac": {
"icon": "xxx/icon.ico"
},
"nsis": {
"oneClick": false, // 一鍵安裝
"guid": "xxxx", //注冊表名字，不推薦修改
"perMachine": true, // 是否開啟安裝時權限限制（此電腦或當前用戶）
"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" // 圖標名稱
}
}
}
配置打包腳本
在 package.json 中，添加對應的打包腳本：
{
…
"scripts": {
"dev": "electron . --enable-loggin --no-sandbox",
"build-64": "electron-builder --win --x64",
"build-linux": "electron-builder --linux",
"build-mac": "electron-builder --mac"
}
…
}
在 my-electron 目錄下打開終端，運行 npm run dev 即可進入開發模式。
關于各平臺 Electron 鏡像
在有網絡的情況下，由于我們設置了 NPM 鏡像和 Electron 源，速度還是很快的。
但我這邊是內網打包，沒法聯網，所以，需要取個巧，在打包開始之前就將對應平臺的 Electron 源下載下來放到各自的 NPM 緩存中去。
electron-builder 在打包的時候，會根據系統的不同去各自的 NPM 緩存目錄下查找對應版本的 Electron 源，當我們將下載好的源放在 NPM 緩存中后，就不需要再去聯網拉去了。
我使用的 electron@14.2.6 鏡像的下載地址為：https://registry.npmmirror.com/binary.html?path=electron/14.2.6/。
這是 @electron/get 中獲取 electron 鏡像緩存的示例：
import { downloadArtifact } from '@electron/get';
const zipFilePath = await downloadArtifact({
version: '14.2.6',
platform: 'darwin',
artifactName: 'electron',
artifactSuffix: 'symbols',
arch: 'x64',
});
各操作系統對應的 NPM 緩存路徑分別為：
- Linux:
$XDG_CACHE_HOMEor~/.cache/electron/ - MacOS:
~/Library/Caches/electron/ - Windows:
%LOCALAPPDATA%/electron/Cacheor~/AppData/Local/electron/Cache/
注意：Linux x64 和 Linux arm64 對應的 electron 鏡像是不同的，
關于開發模式啟動不了的問題
開發模式可能啟動不了，其原因或許是 my-electron、node_modules 下的 electron 未執行安裝，缺少 Electron 源。
想要解決，只需執行以下指令：
node ./node_modules/electron/cli.js
等待 electron 鏡像拉取完成后，即可正常進入開始模式。
總結
以上就是在不聯網的情況下使用 electron-builder 打包全平臺桌面應用的記錄。
~
~ 本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
