前言

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

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

为什么要打包

我上一篇文章《》介绍了在开发环境下运行 Electron 程序的方法，既然可以正常运行了，那为什么还需要经过打包的步骤呢？原因如下：

环境

• 操作系统：

• Electron Version: 16.0.6

• electron-builder: 22.14.5

• 程序代码：《》中用到的 目录

打包步骤

    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

    // 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/#/)。
>

打包前后体积比较

开发环境总体积：

打包生成的 安装包体积：

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

总结

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

~

~ 本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖〗的作者 隐逸王，我的公众号是『』，欢迎关注，希望大家多多指教！

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

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