如何在Electron+React项目中正确配置electron-builder.js？

1. 确认 package.json 中的 build 脚本 #

先确保脚本顺序正确：先完成 React 打包，再执行 electron-builder：

{
  "scripts": {
    "build:react": "webpack --config webpack.renderer.config.js", // 替换为你的 React 打包命令，需输出到 build/react
    "build": "npm run build:react && electron-builder"
  }
}

2. 编写 electron-builder.js 核心配置 #

在项目根目录创建 electron-builder.js，重点配置 files 字段以匹配你的项目结构：

module.exports = {
  appId: "com.yourcompany.yourapp", // 替换为你的应用唯一标识
  productName: "你的应用名称",
  directories: {
    output: "dist" // 指定安装包输出目录为 dist
  },
  files: [
    // 包含 Electron 主进程的所有代码文件
    "src/main/**/*",
    // 包含 React 打包后的静态资源目录
    "build/react/**/*",
    // 必须包含 package.json，供 electron-builder 读取配置
    "package.json"
  ],
  // 排除无需打包的冗余文件
  excludeFiles: [
    "src/renderer/**/*", // React 源码已打包到 build/react，无需重复包含
    "node_modules/**/dev-*",
    ".git",
    ".github",
    "README.md"
  ],
  // 按需配置目标平台（示例包含 Windows/macOS/Linux）
  win: {
    target: "nsis",
    icon: "build/icons/icon.ico" // 可选，配置应用图标路径
  },
  mac: {
    target: "dmg",
    icon: "build/icons/icon.icns"
  },
  linux: {
    target: "deb",
    icon: "build/icons"
  }
};

3. 关键配置说明 #

• files 字段：明确指定需要打包进应用的资源，必须覆盖主进程代码、React 打包产物以及核心配置文件。如果你的主进程代码不在 src/main，替换为实际路径即可。
• directories.output：直接指定最终安装包输出到 dist 目录，匹配你的需求。
• excludeFiles：剔除开发源码、冗余依赖、版本控制文件等，有效缩小安装包体积。

4. 主进程加载 React 页面的路径校验 #

确保主进程中加载打包后的 index.html 路径正确，示例代码：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true, // 推荐开启，提升应用安全性
      preload: path.join(__dirname, '../src/preload.js') // 按需配置预加载脚本
    }
  });

  // 加载 React 打包后的 index.html
  mainWindow.loadFile(path.join(__dirname, '../build/react/index.html'));
}

app.whenReady().then(createWindow);

如果主进程也通过 webpack 打包，需调整 __dirname 对应的路径，确保能正确定位到 build/react 下的静态资源。

内容的提问来源于stack exchange，提问作者dy.kim