写点什么

使用 electron-builder 打包 Electron 程序

作者:编程三昧
  • 2022 年 1 月 20 日
  • 本文字数:2050 字

    阅读完需:约 7 分钟

使用 electron-builder 打包 Electron 程序

前言

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


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

为什么要打包

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


  1. 为了实现跨平台的目的在打包之前,如果我将源码拷贝一份到其他操作系统(比如 windows)上,那要正常运行的话,必须在对应的系统上安装适配该系统的 Electron 执行程序。为了减小跨平台的复杂度,我们需要针对各个不同的平台,将程序代码打包成适配平台的应用程序,达到直接使用的目的。

  2. 为了减小代码体积一个最基本的 Electron 程序,其开发环境代码体积大约 170MB,因为有较多开发依赖(devDependencies),对于程序的传输极不友好。可以通过打包的手段,排查掉众多开发依赖,精简应用代码体积。

环境

打包步骤

  1. 安装 electron-builder


    mkdir electron-builder    cd electron-builder    yarn init -y    yarn add electron-builder -D
复制代码


> 这里建议将 electron-builder 安装在单独的目录,方便复用。>
复制代码


  1. 添加打包指令(也可直接在终端执行)


    // 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
复制代码


  1. 打包配置可根据自己的需要,在 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 官方文档](https://www.electron.build/#/)。>
复制代码

打包前后体积比较

开发环境总体积:



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



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

总结

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


~


~ 本文完,感谢阅读!


~


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

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

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

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

发布于: 刚刚阅读数: 2
用户头像

编程三昧

关注

学习有趣的知识,塑造有趣的灵魂! 2019.08.30 加入

还未添加个人简介

评论

发布
暂无评论
使用 electron-builder 打包 Electron 程序