前言Electron代码开发完成后，要想投入生产环境，必须经过一个非常关键的步骤——打包。今天记录下MacOS上使用electron-builder打包Electron应用的过程。为什么需要打包？我上一篇文章《使用 VSCode 调试 Electron 主进程代码》介绍了在开发环境中运行Electron程序的方法。既然能正常运行，为什么还需要经过打包这些步骤呢？原因如下：为了在打包前达到跨平台的目的，如果我把源码拷贝到其他操作系统（比如windows），那么要正常运行，就必须安装适配该系统的Electron在相应的系统上。程序。为了降低跨平台的复杂度，我们需要将程序代码打包成适用于不同平台的适配应用程序，从而达到直接使用的目的。为了减少代码大小，最基本的Electron程序开发环境代码大小在170MB左右。因为有很多开发依赖（devDependencies），对程序迁移极其不友好。通过打包的方式，可以检出很多开发依赖，可以简化应用代码的体积。环境操作系统：macOSCatalina10.15.7Electron版本：16.0.6electron-builder：22.14.5程序代码：electron-quick-start目录打包步骤《使用 VSCode 调试 Electron 主进程代码》安装electron-buildermkdirelectron-buildercdelectron-builderyarninit-yyarnaddelectron-builder-D建议将electron-builder安装在单独的目录下，方便复用。添加打包指令（也可以直接在终端执行）//electron-quick-start/package.json{"name":"myApp",..."scripts":{..."build":"../electron-builder/node_modules/.bin/electron-builder"},...}执行npmrunbuild后，终端信息如下：>Executingtask:npmrunbuild<>myApp@1.0.0build>../electron-builder/node_modules/.bin/electron-builder?electron-builder版本=22.14.5os=19.6.0?编写有效的配置文件=dist/builder-effective-config.yaml?打包平台=darwinarch=x64electron=16.0.6appOutDir=dist/mac?使用默认Electron图标reason=未设置应用程序图标?跳过macOS应用程序代码签名reason=找不到有效的“DeveloperIDApplication”身份或自定义非Apple代码签名证书，请参阅https://electron。build/code-signingallIdentities=0identitiesfoundValididentitiesonly0valididentitiesfound?建筑目标=macOSziparch=x64file=dist/myApp-1.0.0-mac.zip?buildingtarget=DMGarch=x64file=dist/myApp-1.0.0.dmg?buildingblockmapblockMapFile=dist/myApp-1.0.0.dmg.blockmap?积木图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应用打包过程，希望对大家有所帮助。~~本文到此结束，感谢阅读！~学习有趣的知识，认识有趣的朋友，塑造有趣的灵魂！大家好，我是〖编程三昧〗的作者王隐，我的是『编程三昧』，欢迎关注，希望大家多多指教！你来，怀揣期待，我以墨香迎接你！您归来，不分得失，只送回味！知识与技能并重，内功与外功并重，理论与实践两手抓，两手都要用力！
