如何使用Electron预构建二进制文件手动分发项目并打包依赖

优先选择标准化打包工具 #

你之前手动替换dist/resources默认应用的逻辑是符合Electron分发原理的，但手动操作仅适合小型测试场景，生产环境建议使用社区通用的打包工具自动完成全流程，目前主流选择为electron-builder，无需手动操作Electron预构建文件、依赖拷贝等步骤。

适配分发的项目结构调整 #

建议将你的项目调整为以下结构，更符合打包工具的默认识别规则：

项目根目录
├── src
│   ├── index.html
│   ├── main.js
│   ├── preload.js
│   └── style.css
├── node_modules
├── package-lock.json
└── package.json

打包操作步骤 #

1. 安装依赖
   在项目根目录执行以下命令，安装Electron和打包工具为开发依赖：
   npm install electron electron-builder --save-dev
2. 配置package.json
   补充以下必填配置项：

{
  "name": "你的应用名称",
  "version": "1.0.0",
  "main": "./src/main.js",
  "scripts": {
    "start": "electron .",
    "build:win": "electron-builder --win"
  },
  "build": {
    "appId": "自定义应用唯一标识，例如com.xxx.myapp",
    "directories": {
      "output": "build_output"
    },
    "win": {
      "target": ["nsis", "portable"],
      "icon": "./src/app.ico"
    }
  }
}

以上配置中target字段的nsis对应生成exe安装包，portable对应生成单文件绿色免安装包，可根据需求选择。
3. 执行打包
运行命令npm run build:win，工具会自动完成Electron预构建文件拉取、业务代码打包、依赖整合等操作，最终生成的分发文件会存放在配置指定的build_output目录下。

Node模块自动引入方案 #

无需手动拷贝依赖模块，打包工具会自动识别package.json中dependencies字段下的依赖并打包到分发包中，devDependencies字段下的开发依赖不会被打包。
你只需要将生产环境需要用到的Node模块通过npm install 模块名 --save命令安装为生产依赖即可，打包工具会自动处理依赖的引入和整合。

常见优化提示 #

• 开发用依赖（如Electron、打包工具、代码检查工具等）统一安装为开发依赖，避免不必要的文件被打包导致包体积过大
• 若有特殊自定义文件需要打包，可在build配置的files字段中指定对应路径，工具会自动将其纳入分发包

内容的提问来源于stack exchange，提问作者Yellow_cylinder