electron 项目打包流程

1. 写在最前

electron是前端比较好入手的桌面软件开发技术，能够同时发挥node和网页的优势。然而electron打包经常是受到诟病的部分，一方面打包经常容易失败，另一方面打包出来的软件包会偏大，这确实是不争的事实。

在经历了几个electron项目后，我自己也总结了一点这方面的经验，谨以此来给新手解决一点困惑。

2. electron-forge

electron-forge 是目前electron官方文档上推荐的打包工具，配合create-electron-app使用风味更佳，具体的见 electron-forge 的官方文档，这里就不再展开了。

3. electron-builder

electron-builder 则是我一直在使用的打包工具，不存在孰优孰劣，只是用得熟悉了而已。掌握了一个，其它的也都是差不多的。

具体electron-builder的使用先不多说，先说问题

4. 环境包下载失败

electron-版本号-系统-cpu架构.zip，这是electron的运行环境包，新手打包遇到的第一个问题，就是它下载超时问题，往往会在打包过程中，卡在这一步: (这里使用了网图，因为本机无法复现这种状况)

这个是下载 electron-v8.0.0-darwin-x64.zip 这个包出错了，看请求地址，是从github.com上下载的，所以没下载成功很正常。在windows系统上，可能是报 electron-v8.0.0-win32-x64.zip

这个下载失败的包，是electron在不同系统上的运行时，是支持我们的electron项目的运行外壳。推荐去这里下载自己使用到的版本 淘宝镜像

以8.0.0版本为例，我们发现对应的版本目录里，除了根据系统和cpu架构的包，还有一个名为SHASUMS256.txt的文本文件。下载对应的包，和这个SHASUMS256.txt文件

如果是window用户，把这两个文件，放在下面的目录里：
C:\Users\用户名\AppData\Local\electron\Cache

如果是macos的用户，放置在如下目录:
~/Library/Caches/electron

5. winCodeSign \ nsis \ nsis-resources

在window上打包，如果你用到了这几个工具，那可能也会报相应的下载失败，没事，一个个来，总之哪个失败下载哪个。

这几个包，都可以在这个github仓库里找到，根据自己用到的版本号去搜:
https://github.com/electron-userland/electron-builder-binaries/releases

• winCodeSign
  例如下载的是 winCodeSign-2.6.0 则放在如下目录:
  C:\Users\用户名\AppData\Local\electron-builder\cache\winCodeSign\winCodeSign-2.6.0

• nsis
  例如下载的 nsis-3.0.5.0 则放在如下目录:
  C:\Users\用户名\AppData\Local\electron-builder\cache\nsis\nsis-3.0.5.0

• nsis-resources
  例如下载的 nsis-resources-3.4.1 则放在如下目录:
  C:\Users\用户名\AppData\Local\electron-builder\cache\nsis\nsis-resources-3.4.1

6. 关于打包体积

使用electron-builder打包的话，默认会生成两个asar包: app.asar和electron.asar

其中app.asar几乎占据了我们软件的主要体积，以我打的windows环境的包为例，解压后453.6M的软件，app.asar就占据了305.8M

6.1. 优化 dependences 和 devDependences

我们这里之所以要优化这两个字段，是因为 dependences 里用到的包，都会打包进 app.asar 文件里。这就很可怕了哦。

一般作为前端，应该已经理解了这两个package.json字段的意义。前者是运行时需要的包，后者是开发是需要的包。但是！但是！但是！，在electron项目里，新手可能容易混淆一件事情。举个栗子：

如果一个electron项目，用了react作为页面开发的框架，其中又用到了babel进行es的编译。

babel毫无疑问是在 devDependences 里的对吧，开发时工具
react一般就作为了运行时对吧，在 dependences 里。可是，在electron项目里，最终引用的是react打包之后的静态文件作为页面。所以这里react也要作为开发时，放在 devDependences

那哪些包需要放在 dependences 里呢？比如我这里用到了一个包叫做 live-server 用来开启本地服务器的，这个是我的软件运行时需要的功能，所以就应该放在 dependences 里了。

好了，优化了这个，我们再来打包一次看看…

看到区别了吧，少了接近300M的体积，都是从app.asar里优化掉的。

6.2. 优化electron打包配置

我这里使用了yml格式的配置文件，在package.json里是这样调用的:

"scripts": {
  "build-win": "cross-env ENV=product electron-builder --win --x64 --config electron/electron_builder.yml",
  "build-mac": "cross-env ENV=product electron-builder --mac --config electron/electron_builder.yml"
},

那我们优化的地方是files字段，指明需要打包的文件，很明显，我的docs、src、tester目录，以及.babelrc文件之类的是不需要打包进去的。由于个人项目原因，dist目录也不需要打包，实际根据自己需要，一般是要打包进去的。