使用 electron-builder 打包 Electron 程序

001

前言

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

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

为什么要打包

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

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

环境

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

打包步骤

安装 electron-builder
```
 mkdir electron-builder
 cd electron-builder
 yarn init -y
 yarn add electron-builder -D
```
这里建议将 electron-builder 安装在单独的目录，方便复用。

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

 // electron-quick-start/package.json
 {
     "name": "myApp",
     ……
     "scripts": {
         ……
         "build": "../electron-builder/node_modules/.bin/electron-builder"
     },
     ……
 }

执行 npm run build 之后，终端信息如下：

 > Executing task: npm run build <
 > myApp@1.0.0 build
 > ../electron-builder/node_modules/.bin/electron-builder
   • electron-builder  version=22.14.5 os=19.6.0
   • writing effective config  file=dist/builder-effective-config.yaml
   • packaging       platform=darwin arch=x64 electron=16.0.6 appOutDir=dist/mac
   • default Electron icon is used  reason=application icon is not set
   • skipped macOS application code signing  reason=cannot find valid "Developer ID Application" identity or custom non-Apple code signing certificate, see https://electron.build/code-signing allIdentities=     0 identities found
                                                 Valid identities only
      0 valid identities found
   • building        target=macOS zip arch=x64 file=dist/myApp-1.0.0-mac.zip
   • building        target=DMG arch=x64 file=dist/myApp-1.0.0.dmg
   • building block map  blockMapFile=dist/myApp-1.0.0.dmg.blockmap
   • building block map  blockMapFile=dist/myApp-1.0.0-mac.zip.blockmap

在 electron-quick-start 下生成的 dist 文件夹，其文件结构如下：

 ./dist
 ├── builder-debug.yml
 ├── builder-effective-config.yaml
 ├── latest-mac.yml
 ├── mac
 │   └── myApp.app
 ├── myApp-1.0.0-mac.zip
 ├── myApp-1.0.0-mac.zip.blockmap
 ├── myApp-1.0.0.dmg
 └── myApp-1.0.0.dmg.blockmap

打包配置
可根据自己的需要，在 package.json 中增加配置项。

 // electron-quick-start/package.json
 {
     "name": "myApp",
     ……
     "scripts": {
         ……
         "build": "../electron-builder/node_modules/.bin/electron-builder"
     },
     ……
     "build": {
         "productName": "myFirstApp",    // 指定打包成的程序名称，可包含空格
         "appId": "bianchengsanmei",
         "directories": {
             "output": "build" // 指定打包程序的输出目录
         },
         "mac": {
             "target": "dmg"
         },
         "dmg": {
             "backgroundColor": "#fff"
         }
     }
 }

具体相关配置可查看 electron-builder 官方文档。

打包前后体积比较

开发环境总体积：

打包生成的 .dmg 安装包体积：

可以看到，通过打包，使得程序体减少了一大半。

总结

以上就是一次简单的 Electron 应用打包过程，希望能够对你有所帮助。

~ 本文完，感谢阅读！

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

你来，怀揣期望，我有墨香相迎！你归，无论得失，唯以余韵相赠！

知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！

前言

为什么要打包

环境

打包步骤

打包前后体积比较

总结

相关文章