Electron-builder打包指南

一、安裝

1、安裝操作系統相關依賴庫，以Ubuntu為例：

sudo apt-get install icnsutils graphicsmagick xz-utils

2、通過npm進行electron-builder全局安裝：

npm install electron-builder --global

二、配置文件

1、package.json中添加打包配置信息：

"build": {
  "appId": "com.example.app",
  "productName": "My App",
  "directories": {
    "output": "dist"
  },
  "linux": {
    "target": "deb",
    "icon": "build/icon.png"
  },
  "mac": {
    "target": "dmg",
    "icon": "build/icon.icns"
  },
  "win": {
    "target": "nsis",
    "icon": "build/icon.ico"
  },
  "publish": [{
    "provider": "github",
    "owner": "username",
    "repo": "repository",
    "private": true
  }]
}

其中，appId為應用的標識符，productName為應用名稱，directories.output為可執行文件的輸出目錄，linux/mas/win為對應平台的打包配置，publish為可選項，用於上傳release文件。

2、創建build目錄，並將對應平台的圖標文件放在其中。

3、在package.json同級目錄中創建electron-builder的配置文件：builder.json，添加配置信息。

{
  "directories": {
    "output": "dist"
  },
  "linux": {
    "target": "deb",
    "icon": "build/icon.png"
  },
  "mac": {
    "target": "dmg",
    "icon": "build/icon.icns"
  },
  "win": {
    "target": "nsis",
    "icon": "build/icon.ico"
  },
  "publish": [{
    "provider": "github",
    "owner": "username",
    "repo": "repository",
    "private": true
  }]
}

注意，build目錄中的圖標文件路徑與這裡的相對路徑要對應上。

三、打包命令

1、使用electron-builder默認配置進行打包：

electron-builder

2、指定打包配置文件：

electron-builder --config.builder.json

3、指定平台與打包類型：

electron-builder --mac -p always

其中，-p參數指定發布方式，always表示上傳發布文件，never表示不上傳，onTag表示在git tag時上傳。

四、其他技巧

1、使用GitHub Actions自動化打包：

name: Build and Release

on:
  push:
    branches:
      - master

jobs:
  build-and-release:
    name: Build and Release
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: Install Dependencies
        run: npm install

      - name: Build and Release
        run: npm run build && electron-builder --publish always

2、配置文件可以繼承：

{
  "extends": "./builder.json",
  "mac": {
    "category": "public.app-category.developer-tools"
  }
}

這樣就只需要在新的配置文件中添加需要覆蓋的部分了。

五、總結

通過以上步驟，我們就可以使用electron-builder將我們的應用打包成可發布的文件。在具體實踐中，還需要注意不同平台的依賴和打包方式，以及加入自動化打包流程等。