欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用 electron-builder 打包 Electron 程序

程序员文章站 2022-04-17 19:03:35
...

使用 electron-builder 打包 Electron 程序

前言

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

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

为什么要打包

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

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

环境

打包步骤

  1. 安装 electron-builder

    1. mkdir electron-builder
    2. cd electron-builder
    3. yarn init -y
    4. yarn add electron-builder -D

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

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

    1. // electron-quick-start/package.json
    2. {
    3. "name": "myApp",
    4. ……
    5. "scripts": {
    6. ……
    7. "build": "../electron-builder/node_modules/.bin/electron-builder"
    8. },
    9. ……
    10. }

    执行 npm run build 之后,终端信息如下:

    1. > Executing task: npm run build <
    2. > myApp@1.0.0 build
    3. > ../electron-builder/node_modules/.bin/electron-builder
    4. electron-builder version=22.14.5 os=19.6.0
    5. writing effective config file=dist/builder-effective-config.yaml
    6. packaging platform=darwin arch=x64 electron=16.0.6 appOutDir=dist/mac
    7. default Electron icon is used reason=application icon is not set
    8. 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
    9. Valid identities only
    10. 0 valid identities found
    11. building target=macOS zip arch=x64 file=dist/myApp-1.0.0-mac.zip
    12. building target=DMG arch=x64 file=dist/myApp-1.0.0.dmg
    13. building block map blockMapFile=dist/myApp-1.0.0.dmg.blockmap
    14. building block map blockMapFile=dist/myApp-1.0.0-mac.zip.blockmap

    electron-quick-start 下生成的 dist 文件夹,其文件结构如下:

    1. ./dist
    2. ├── builder-debug.yml
    3. ├── builder-effective-config.yaml
    4. ├── latest-mac.yml
    5. ├── mac
    6. └── myApp.app
    7. ├── myApp-1.0.0-mac.zip
    8. ├── myApp-1.0.0-mac.zip.blockmap
    9. ├── myApp-1.0.0.dmg
    10. └── myApp-1.0.0.dmg.blockmap
  3. 打包配置
    可根据自己的需要,在 package.json 中增加配置项。

    1. // electron-quick-start/package.json
    2. {
    3. "name": "myApp",
    4. ……
    5. "scripts": {
    6. ……
    7. "build": "../electron-builder/node_modules/.bin/electron-builder"
    8. },
    9. ……
    10. "build": {
    11. "productName": "myFirstApp", // 指定打包成的程序名称,可包含空格
    12. "appId": "bianchengsanmei",
    13. "directories": {
    14. "output": "build" // 指定打包程序的输出目录
    15. },
    16. "mac": {
    17. "target": "dmg"
    18. },
    19. "dmg": {
    20. "backgroundColor": "#fff"
    21. }
    22. }
    23. }

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

打包前后体积比较

开发环境总体积:

使用 electron-builder 打包 Electron 程序

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

使用 electron-builder 打包 Electron 程序

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

总结

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

~

~ 本文完,感谢阅读!

~

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

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

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

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