7. 打包与发布

这是什么：打包 = 把你的项目 + Electron 框架本体压成一个能发给别人的可执行文件（如 .exe），工具用最流行的 electron-builder。

为什么用：现在这个应用只有你电脑能跑——要求对方装 Node、npm install 再 npm start，这不可能要求普通用户做。打包后的软件双击就能用。

如何用：装 electron-builder，加十几行配置，跑一条 npm run dist。

7.1 安装与配置

npm install --save-dev electron-builder

在 package.json 里加 dist 脚本和 build 配置段：

{
  "name": "my-first-electron",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  },
  "build": {
    "appId": "com.frog.my-first-electron",
    "productName": "我的第一个应用",
    "directories": {
      "output": "release"
    },
    "win": {
      "target": "portable"
    }
  },
  "devDependencies": {
    "electron": "^45.0.0",
    "electron-builder": "^26.0.0"
  }
}

配置	作用
`"dist": "electron-builder"`	打包命令：`npm run dist`
`appId`	应用的唯一身份证（反向域名惯例，随便一个项目改成自己的名字即可）
`productName`	软件显示名——任务栏、安装界面里叫这个名字
`directories.output`	产物输出目录，默认叫 `dist`，改成 `release` 免得和网页文件混
`win.target: "portable"`	Windows 出免安装单文件 exe（还有 `nsis` 安装包向导，进阶再换）

🐢 electron-builder 首次打包要下载打包工具链，慢的话加一条镜像：
npm config set electron_builder_binaries_mirror https://npmmirror.com/mirrors/electron-builder-binaries/

7.2 打包！

npm run dist

首次运行要几分钟，结束看 release/ 目录：

release/
└── 我的第一个应用 1.0.0.exe   ← 双击直接运行，无需安装

把它发给朋友，对方双击就是完整的桌面软件——窗口、界面、IPC、原生能力全部照常工作。

只打包当前操作系统的版本：在 Windows 上打出的是 .exe，macOS 用户要在 Mac 上打包出 .dmg，Linux 出 .AppImage。三平台发布通常用 CI 自动化（进阶内容）。

7.3 为什么包这么大

装个记事本应用 100 MB+？因为每个 Electron 应用都自带一个完整的 Chromium 和 Node.js——不依赖用户电脑装没装浏览器，行为 100% 可控。这是"一套代码三平台 + 界面随便做"换来的代价，业界（VSCode 也一样）都接受。

想瘦身可以：排除用不到的文件、压缩资源，但减不掉 Chromium 本体，不必纠结。

7.4 打包配置的两个坑

坑	现象	解决
中文 `productName`	个别老版本 NSIS 安装包报编码错误	用 `portable` 或英文名先跑通
打包后找不到文件	开发时 `path.join(__dirname, ...)` 能跑，打包后路径变了	资源文件和 js 放同一目录、统一用相对 `__dirname` 的路径；大文件放进 `build.files` 白名单

files 白名单不写就默认打包整个项目目录（node_modules 与开发依赖自动排除），学习阶段保持默认即可。

❓ 常见翻车现场

Q1：npm run dist 卡在下载工具链不动

原因：electron-builder 首次要下载 winCodeSign 等工具，国外源慢。解决：用 7.1 的国内镜像命令；还是不行就挂代理重跑。

Q2：打包成功的 exe 在别人电脑上双击闪退

原因：多数是代码里用了绝对路径（比如 E:\project\index.html），到了别人电脑路径不存在。解决：所有资源加载都用 path.join(__dirname, ...) 或相对路径，本地先改名项目目录复现验证。

Q3：改了代码，打包出来还是旧版

原因：忘了重新打包（打包是"拍快照"，不跟着源码变）。解决：每次发版前重新 npm run dist，并顺手把 version 加一。

💡 动手改

把 productName 改成你自己的应用名，重新打包看文件名变化
把 win.target 换成 nsis，再打包——对比安装包版和免安装版的差别
给 package.json 的 version 升到 1.0.1，重新打包，确认文件名跟着变

📦 本章小结

electron-builder 一条 npm run dist 出成品，产物在 release/
appId / productName / win.target 是最常用的三块配置
包大的根因是自带 Chromium，属于正常现象
打包是快照：改完代码要重打；路径一律相对 __dirname

下一章：综合练习：迷你记事本 🐸