标签：1.0 builder Electron electron myApp 打包
前言
在将 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 应用打包过程，希望能够对你有所帮助。
-
~
- 本文完，感谢阅读！
~
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
你来，怀揣期望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！
知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！
标签：1.0,builder,Electron,electron,myApp,打包 来源： https://blog.csdn.net/qq_37718797/article/details/122596524
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。