使用 electron-builder 打包 Electron 程序

前言

在将 Electron 代码开发完成后，如果想要投入生产环境，那就必须经过很关键的一步——打包。

今天就将 MacOS 上使用 electron-builder 打包 Electron 应用的过程做一个记录。

为什么要打包

我上一篇文章《使用 VSCode 调试 Electron 主进程代码》介绍了在开发环境下运行 Electron 程序的方法，既然可以正常运行了，那为什么还需要经过打包的步骤呢？原因如下：

1. 为了实现跨平台的目的
   在打包之前，如果我将源码拷贝一份到其他操作系统（比如 windows）上，那要正常运行的话，必须在对应的系统上安装适配该系统的 Electron 执行程序。
   为了减小跨平台的复杂度，我们需要针对各个不同的平台，将程序代码打包成适配平台的应用程序，达到直接使用的目的。
2. 为了减小代码体积
   一个最基本的 Electron 程序，其开发环境代码体积大约 170MB，因为有较多开发依赖（devDependencies），对于程序的传输极不友好。
   可以通过打包的手段，排查掉众多开发依赖，精简应用代码体积。

环境

• 操作系统： macOS Catalina 10.15.7
• Electron Version: 16.0.6
• electron-builder: 22.14.5
• 程序代码：《使用 VSCode 调试 Electron 主进程代码》中用到的 electron-quick-start 目录

打包步骤

1. 安装 electron-builder

   mkdir electron-builder
   cd electron-builder
   yarn init -y
   yarn add electron-builder -D
   

   这里建议将 electron-builder 安装在单独的目录，方便复用。

2. 添加打包指令（也可直接在终端执行）

   // electron-quick-start/package.json