前言

与传统的web开发不同的是，桌面应用需要打包分发。如何将electron代码打包成不同平台可安装运行的介质是我们开发electron应用必备的环节。

本节介绍打包的基础知识及操作步骤。

我们在上一节已经开发一个简单的应用，后续我们就针对这个应用来学习一下如何打包。

补充一点：如果大家在运行命令：

electron  .

存在找不到electron命令时，可能是没有全局安装electron导致的。一般我们为了避免不同项目干扰，把electron安装在项目中，因此可以在package.json中增加一个脚本命令：

"scripts": {
     "dev": "electron ."
}

然后运行：

npm run dev

npm run 命令会自动将本项目的.\node_modules\.bin\添加到环境中，本地安装的electron可运行脚本就在此目录下。

打包

electron提供多种方式完成打包工作。在其官网上提供两种：electron-packager和electron-builder。简而言之electron-packager把项目打包成一个文件夹，而electron-builder可以打包成可安装文件。

为简单起见，我们介绍electron-builder。

我们把前一节的项目目录改为demo2.

要使用这个工具，先要安装下这个工具。根据官网建议，我们使用yarn来安装它：

yarn add electron-builder --dev

我们知道electron可以发布成多平台的桌面应用，不同的平台需要提供不同的配置信息。一般这个配置信息可以使用单独的文件来描述，也可以直接在package.json中提供。

在package.json提供的配置信息是在顶级"build":{}定义的。

下面给出具体的在windows平台上打包例子：

  "build": {
    "appId": "beer.u2.demo2",
    "copyright": "u2",
    "productName": "demo2",
    "dmg": {
      "background": "assets/background.png",
      "window": {
        "x": 100,
        "y": 100,
        "width": 500,
        "height": 300
      }
    },
    "win": {
      "icon": "assets/icon.ico"
    }
  }

在package.json的"scripts"下增加几个新的脚本命令：

"pack": "electron-builder --dir",
 "dist": "electron-builder",

在终端窗口中执行：

yarn dist

我们在demo2/dist目录下就会生成一个安装文件：demo Setup 1.0.0.exe

运行这个安装文件就可以把我们这个应用部署到本机了。

打包分析

在你不知道的Electron (二)-了解Electron打包 - 知乎中，对打包进行比较深入的分析。这里也简单概述一下：

• 打包后文件大小

总体而言，electron打包后的文件会有100M左右大小，我们这次打包后就达110M，还是很大的。

• 影响因素

在dist/win-unpackged/resources/下有一个app.asar文件，解压后可以看到被打包的文件：

.
├── CHANGELOG.md
├── README.md
├── core
├── electron
├── icon
├── node_modules
├── package.json
├── test
├── view
└── webpack.config.js

node_modules包显然是最大影响因素，这边目录会把package.json中dependencies依赖包都打包进来。

我们看到electron.exe文件大概有60M多，这个是electron针对不同平台提供的可执行文件。

我们总结下，打包后程序大小基本上就是由electron+依赖包+本身程序决定的。

• 打包后程序运行逻辑

安装后程序运行是由electron调用app.asar中的package.json中main入口程序。因此在实际进行打包时，有可能需要修改这个入口，尤其是我们一般不会再原生js+html+css编程，而是利用vue、react等框架编程时，这个入口程序的位置在打包发布时会发生变化。我们后续介绍electron+vue编程时再说明。

小结

关于如何将electron打包发布到linux、mac，大家可以到官网上看相关资料，网上也有不少这方面的资料。

后续几节我们重点介绍electron本身的编程知识，前端展示使用的原生的js+css+html完成。等我们基本掌握electron基本编程后，再重点介绍基于vue开发electron相关知识。