使用 electron-builder 打包 Electron 程序
前言
在将 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 应用打包过程,希望能够对你有所帮助。
~
~ 本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!
知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!
上一篇: 使用 VSCode 调试 Electron 主进程代码
下一篇: html前端基础知识
推荐阅读
-
Visual Studio 2010怎么使用自带的安装项目打包程序?
-
想使用PE里没有的程序如何把程序打包进WinPE中
-
解决Ubuntu下使用linuxdeployqt打包Qt程序问题
-
使用electron将vue-cli项目打包成exe的方法
-
Visual Studio 2010怎么使用自带的安装项目打包程序?
-
如何使用pyinstaller打包32位的exe程序
-
使用NuGet将我们的ASP.NET Core类库打包并将程序包(类库)发布到NuGet平台上进行管理
-
C#使用InstallerProjects打包桌面应用程序的完整步骤
-
想使用PE里没有的程序如何把程序打包进WinPE中
-
记录使用cx_Freeze打包Python成exe可执行程序