前言

在将 Electron 代码开发实现后，如果想要投入生产环境，那就必须通过很要害的一步——打包。

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

为什么要打包

我上一篇文章《应用 VSCode 调试 Electron 主过程代码》介绍了在开发环境下运行 Electron 程序的办法，既然能够失常运行了，那为什么还须要通过打包的步骤呢？起因如下：

  1. 为了实现跨平台的目标
    在打包之前，如果我将源码拷贝一份到其余操作系统（比方 windows）上，那要失常运行的话，必须在对应的零碎上装置适配该零碎的 Electron 执行程序。
    为了减小跨平台的复杂度，咱们须要针对各个不同的平台，将程序代码打包成适配平台的应用程序，达到间接应用的目标。
  2. 为了减小代码体积
    一个最根本的 Electron 程序，其开发环境代码体积大概 170MB，因为有较多开发依赖（devDependencies），对于程序的传输极不敌对。
    能够通过打包的伎俩，排查掉泛滥开发依赖，精简利用代码体积。

环境

  • 操作系统： macOS Catalina 10.15.7
  • Electron Version: 16.0.6
  • electron-builder: 22.14.5
  • 程序代码：《应用 VSCode 调试 Electron 主过程代码》中用到的 electron-quick-start 目录

打包步骤

  1. 装置 electron-builder

    mkdir electron-buildercd electron-builderyarn init -yyarn add electron-builder -D
    这里倡议将 electron-builder 装置在独自的目录，不便复用。

  2. 增加打包指令（也可间接在终端执行）

    // 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

  3. 打包配置
    可依据本人的须要，在 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 利用打包过程，心愿可能对你有所帮忙。

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

你来，怀揣冀望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！

常识与技能并重，内力和外功兼修，实践和实际两手都要抓、两手都要硬！