如何使用 electron-builder 打包 Electron 应用？

推荐答案

// www.javascriptcn.com code example
# 1. 安装 electron-builder
npm install electron-builder --save-dev

# 2. 在 package.json 中添加构建配置
{
  "scripts": {
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.example.app",
    "productName": "MyApp",
    "directories": {
      "output": "dist"
    },
    "files": [
      "**/*",
      "!node_modules/**/*"
    ],
    "mac": {
      "target": "dmg"
    },
    "win": {
      "target": "nsis"
    },
    "linux": {
      "target": "AppImage"
    }
  }
}

# 3. 运行构建命令
npm run build

本题详细解读

1. 安装 electron-builder

首先，你需要在项目中安装 electron-builder。可以通过以下命令安装：

npm install electron-builder --save-dev

2. 配置 package.json

在 package.json 文件中添加构建脚本和构建配置。以下是一个示例配置：

// www.javascriptcn.com code example
{
  "scripts": {
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.example.app",
    "productName": "MyApp",
    "directories": {
      "output": "dist"
    },
    "files": [
      "**/*",
      "!node_modules/**/*"
    ],
    "mac": {
      "target": "dmg"
    },
    "win": {
      "target": "nsis"
    },
    "linux": {
      "target": "AppImage"
    }
  }
}

• appId: 应用的唯一标识符。
• productName: 应用的名称。
• directories.output: 打包后的输出目录。
• files: 指定需要包含在打包中的文件，通常排除 node_modules。
• mac, win, linux: 分别配置不同平台的打包目标格式。

3. 运行构建命令

配置完成后，运行以下命令进行打包：

npm run build

electron-builder 会根据配置自动生成对应平台的安装包，并输出到指定的 dist 目录中。