Electron 使? electron-builder 打包應用過程詳解

更新時間：2024年10月09日 09:34:56 作者：fishmemory7sec

Electron應用開發(fā)中,electron-builder是一個常用的打包工具,提供了多種自定義配置,不過,使用npm安裝electron-builder時可能會遇到下載依賴慢或失敗的問題,本文給大家介紹Electron 使? electron-builder 打包應用的相關操作,感興趣的朋友一起看看吧

electron有幾種打包方式，我使用的是electron-builder。雖然下載依賴的時候讓我暴躁，使用起來也很繁瑣，但是它能進行很多自定義，打包完成后的體積也要小一些。

安裝electron-builder：

npm install electron-builder -D

使用 npm 下載 electron-builder 真的非常非常難受！總是失??！

electron-builder官方建議使用yarn下載，并且明確表示Yarn is strongly recommended instead of npm.

yarn add electron-builder --dev

在 package.json 中進?相關配置：

{
  "name": "my-electron-app", // 應?程序的名稱
  "version": "1.0.0", // 應?程序的版本
  "main": "main.js", // 應?程序的???件
  "scripts": {
  "start": "electron .", // 使? `electron .` 命令啟動應?程序
  "build": "electron-builder" // 使? `electron-builder` 打包應?程序，?成安裝包
  },
  "build": {
  "appId": "my-electron-app", // 應?程序的唯?標識符
  // 打包windows平臺安裝包的具體配置
  "win": {
  "icon": "./favicon.ico", //應?圖標
  "target": [
  {
  "target": "nsis", // 指定使? NSIS 作為安裝程序格式
  "arch": ["x64"] // ?成 64 位安裝包
  }
  ]
  },
  "nsis": {
  "oneClick": false, // 設置為 `false` 使安裝程序顯示安裝向導界?，?不是?鍵安裝
  "perMachine": true, // 允許每臺機器安裝?次，?不是每個?戶都安裝
  "allowToChangeInstallationDirectory": true // 允許?戶在安裝過程中選擇安裝?錄
  }
  },
  "devDependencies": {
  "electron": "^30.0.0", // 開發(fā)依賴中的 Electron 版本
  "electron-builder": "^24.13.3" // 開發(fā)依賴中的 `electron-builder` 版本
  },
  "author": "zhangSan", // 作者信息
  "license": "ISC", // 許可證信息
  "description": "一個測試用的electron項目" // 應?程序的描述
}

配置完成后，執(zhí)行打包命令：

npm run build

問題及解決方案下載Electron v32.1.2 的壓縮包時出現了問題，導致后續(xù)的操作無法進行：

Electron 默認打包會從github上下載相關二進制包，在國內訪問github非常慢，下載相關資源失敗是很可能的事情。

直接通過瀏覽器訪問 https://github.com/electron/electron/releases/download/v32.1.2/electron-v32.1.2-win32-x64.zip，看是否能夠正常下載：

解決方案

翻一下墻，打開開關，解決問題
配置electron相關資源的鏡像源

修改npm配置文件（沒有就創(chuàng)建）：

可以在終端輸入npm config edit命令，打開.npmrc文件
可以按路徑C:\Users\PC找到.npmrc文件并打開
設置 electron 和 electron-builder-binaries 的鏡像地址：

electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
always-auth=false

electron_mirror：這個環(huán)境變量指定了 Electron 的下載鏡像地址。當項目需要下載 Electron 時，會優(yōu)先從這個地址去獲取二進制文件。
electron_builder_binaries_mirror：這個環(huán)境變量指定了 electron-builder-binaries 的下載鏡像地址。electron-builder 是一個用于構建 Electron 應用的工具，而 electron-builder-binaries 包含了一些預編譯的二進制文件，用于不同的平臺和架構。設置這個鏡像地址可以確保在構建過程中能夠快速、穩(wěn)定地獲取這些二進制文件。
always-auth=false：表示在訪問這些鏡像資源時不需要進行身份驗證。

.ico文件的尺寸至少是256 * 256