electron-builder打包.001

前言

Electron 之所以能夠日益風(fēng)靡，是因?yàn)槠浜?jiǎn)單易用且對(duì)各個(gè)操作平臺(tái)具有良好的支持。

今天我就來(lái)分享一下怎么使用一套代碼，快速打包生成各主流平臺(tái)安裝包的經(jīng)驗(yàn)。

項(xiàng)目安裝

首先，使用我前面介紹的提效小技巧，設(shè)置：

• NPM 源為淘寶鏡像源；
• Electron 源為中國(guó)鏡像網(wǎng)站中的 Electron 源地址。

然后依次執(zhí)行以下指令：

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",//項(xiàng)目名 這也是生成的exe文件的前綴名
    "appId": "xxxxx", 
    "copyright":"xxxx",//版權(quán)信息
    "directories": {
        "output": "build" // 輸出文件夾
    }, 
    "extraResources":  [{ // 需要讀寫(xiě)的配置文件
        "from": "./config/config.json",
        "to": "../config/config.json"
    }],
    "win": {  
        "icon": "xxx/icon.ico"http://圖標(biāo)路徑,
        "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", //注冊(cè)表名字，不推薦修改
        "perMachine": true, // 是否開(kāi)啟安裝時(shí)權(quán)限限制（此電腦或當(dāng)前用戶(hù)）
        "allowElevation": true, // 允許請(qǐng)求提升。 如果為false，則用戶(hù)必須使用提升的權(quán)限重新啟動(dòng)安裝程序。
        "allowToChangeInstallationDirectory": true, // 允許修改安裝目錄
        "installerIcon": "./build/icons/aaa.ico", // 安裝圖標(biāo)
        "uninstallerIcon": "./build/icons/bbb.ico", //卸載圖標(biāo)
        "installerHeaderIcon": "./build/icons/aaa.ico", // 安裝時(shí)頭部圖標(biāo)
        "createDesktopShortcut": true, // 創(chuàng)建桌面圖標(biāo)
        "createStartMenuShortcut": true, // 創(chuàng)建開(kāi)始菜單圖標(biāo)
        "shortcutName": "xxxx" // 圖標(biāo)名稱(chēng)
    }
  }
}

配置打包腳本

在 package.json 中，添加對(duì)應(yīng)的打包腳本：

{
    …
    "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 目錄下打開(kāi)終端，運(yùn)行 npm run dev 即可進(jìn)入開(kāi)發(fā)模式。

關(guān)于各平臺(tái) Electron 鏡像

在有網(wǎng)絡(luò)的情況下，由于我們?cè)O(shè)置了 NPM 鏡像和 Electron 源，速度還是很快的。

但我這邊是內(nèi)網(wǎng)打包，沒(méi)法聯(lián)網(wǎng)，所以，需要取個(gè)巧，在打包開(kāi)始之前就將對(duì)應(yīng)平臺(tái)的 Electron 源下載下來(lái)放到各自的 NPM 緩存中去。

electron-builder 在打包的時(shí)候，會(huì)根據(jù)系統(tǒng)的不同去各自的 NPM 緩存目錄下查找對(duì)應(yīng)版本的 Electron 源，當(dāng)我們將下載好的源放在 NPM 緩存中后，就不需要再去聯(lián)網(wǎng)拉去了。

我使用的 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',
});

各操作系統(tǒng)對(duì)應(yīng)的 NPM 緩存路徑分別為：

• Linux: $XDG_CACHE_HOME or ~/.cache/electron/
• MacOS: ~/Library/Caches/electron/
• Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron/Cache/

注意：Linux x64 和 Linux arm64 對(duì)應(yīng)的 electron 鏡像是不同的，

關(guān)于開(kāi)發(fā)模式啟動(dòng)不了的問(wèn)題

開(kāi)發(fā)模式可能啟動(dòng)不了，其原因或許是 my-electron、node_modules 下的 electron 未執(zhí)行安裝，缺少 Electron 源。

想要解決，只需執(zhí)行以下指令：

node ./node_modules/electron/cli.js

等待 electron 鏡像拉取完成后，即可正常進(jìn)入開(kāi)始模式。

總結(jié)

以上就是在不聯(lián)網(wǎng)的情況下使用 electron-builder 打包全平臺(tái)桌面應(yīng)用的記錄。

~

~ 本文完，感謝閱讀！

~

學(xué)習(xí)有趣的知識(shí)，結(jié)識(shí)有趣的朋友，塑造有趣的靈魂！

大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號(hào)是『編程三昧』，歡迎關(guān)注，希望大家多多指教！