Electron 桌面应用打包实战：builder 与 packager 深度解析

这里需要重点说明一下 nsis 配置。它控制着 Windows 下的安装过程。如果不配置，程序默认会静默安装在 C 盘，用户没有选择安装路径的权利，这在实际交付中通常是不被接受的。

关于 include 和自定义脚本的选择：如果需求比较简单，比如只修改安装位置或卸载提示，建议使用 include 引入 .nsh 脚本；如果需要炫酷的安装界面或复杂的逻辑，则建议完全自定义脚本。NSIS 功能强大，但学习曲线相对陡峭。

在项目的根路径下执行以下命令即可开始打包：

electron-builder

首次打包时，工具会根据不同平台下载对应的 Electron 运行时文件（Chromium + Node），这也是 Electron 应用体积较大的主要原因。为了简化操作，可以在 scripts 中添加快捷命令：

{
  "scripts": {
    "dist": "electron-builder"
  }
}

Electron 虽然是跨平台的，但底层依赖 Node 和 Chromium，打包时必须指定目标平台。如果不指定，默认会构建当前系统环境的版本。可以通过参数强制指定：

electron-builder --platform=darwin
electron-builder --platform=win32
electron-builder --platform=linux

更多详细选项请查阅官方文档。

electron-builder 常见报错与解决

1. 本地资源加载限制

错误信息类似：Not allowed to load local resource: file:///.../index.html

这通常是因为 HTML 中引用了 file:// 协议的资源，或者 build 配置中的 files 字段未包含必要的静态资源文件夹。解决办法是在 package.json 的 build 配置中明确指定要打包的文件：

{
  "build": {
    "appId": "com.wss.app",
    "directories": { "output": "builder" },
    "win": { "target": ["nsis", "zip"] },
    "files": [
      "build/**/*",
      "main.js",
      "public/preload.js"
    ]
  }
}

确保 main.js 入口文件一定在 files 列表中。

2. 入口文件找不到

错误信息：Application entry file 'build/electron.js' in the package.json is not found.

在使用 React-CRA 等脚手架时，入口文件可能被重命名。此时可以在 package.json 的 build 配置中将 extends 设置为 null，以覆盖默认配置。

3. 缺少描述或作者信息

警告信息：description is missed, author is missed

直接在 package.json 根节点补充 description 和 author 字段即可。

分析 electron-builder 打包结果

打包成功后，文件位于项目根目录的 dist 文件夹下。Windows 平台会生成一个 .exe 可执行文件，直接双击即可运行。有趣的是，这个 exe 本质上是一个压缩文件，解压后可以看到典型的 Electron 目录结构：

• resources：存放核心资源
• resources/app.asar：这是打包后的代码归档文件

ASAR 格式是一种归档格式，类似于 zip，但专为 Electron 设计。我们可以使用 asar 工具解包查看内容：

npm i asar -g
asar e app.asar app

解包后发现，源代码并未加密，只是被归档了。这意味着只要懂 JS 和 Electron 架构，逆向成本相对较低。因此，对于敏感业务逻辑，建议在服务端处理或在编译阶段进行混淆。

使用 electron-packager 打包

另一个常用工具是 electron-packager。相比 builder，它更轻量，适合快速构建单文件应用。

安装到开发依赖：

npm install electron-packager --save-dev

由于该工具需要从国外服务器下载 Electron 预编译版本，速度可能较慢。建议配置淘宝镜像加速：

npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

基本命令格式如下：

electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>

最简单的跨平台打包命令：

electron-packager ./ --all

常用参数说明：

• --overwrite：覆盖已存在的构建目录。
• --asar：将源码打包进 ASAR 文件。
• --out：指定输出目录。

示例命令：

electron-packager . MyApp --platform=win32 --arch=x64 --electron-version=8.0.3 --asar --out=app

注意：electron-version 必须与项目中安装的 Electron 版本一致，否则可能出现 404 错误。如果遇到版本号请求失败，可以尝试设置自定义目录：

npm config set electron_custom_dir 8.0.3

分析 electron-packager 打包结果

electron-packager 生成的结构与 builder 类似，同样包含 resources/app.asar。区别在于，如果打包时未指定 --asar 参数，源码会直接暴露在 resources 目录下，安全性更低。因此，生产环境务必开启 ASAR 归档。

总结

1. 跨平台支持：Electron 打包时需明确指定目标平台，工具会自动下载对应版本的运行时。
2. 代码安全：ASAR 仅是归档而非加密，源代码依然可见。对于高敏感逻辑，需配合服务端验证或混淆方案。
3. 工具选择：electron-builder 配置丰富，适合发布安装程序；electron-packager 轻量灵活，适合分发单文件或测试场景。