Electron-builder打包指南

TKVDQ • 2025-04-13 11:45 • 编程

一、安装

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将我们的应用打包成可发布的文件。在具体实践中，还需要注意不同平台的依赖和打包方式，以及加入自动化打包流程等。

原创文章，作者：TKVDQ，如若转载，请注明出处：https://www.506064.com/n/369660.html