Electron 项目打包

打包可算是项目开发的一个句号，在这过程中，我也踩过不少坑，这里简单记录下自己的要点，也希望这篇文章可以给大家一些参考。

目前打包我经常用2种方式：

electron-packager
electron-builder

先说下这两种大体上的区别：

electron-packager 有点像绿色解压版，会把所有的文件暴露出来。
electron-builder 打包应用是 安装包 方式，比如dmg,pkg,exe,deb 等等。

electron-packager**

使用命令：npm install electron-packager --save-dev 可安装相关模块

安装好后配置 package.json 文件的 package 打包运行脚本

"scripts": {
    "start": "electron .",
    "dev": "electron . --debug",
    "package": "npm-run-all package:*",
    "package:mac": "electron-packager ./app --overwrite --platform=darwin --arch=x64 --out=out --icon=app/assets/app-icon/mac/app.icns --osx-sign.identity='Developer ID Application: GitHub'",
    "package:win": "electron-packager ./app --overwrite --platform=win32 --arch=ia32 --out=out --icon=app/assets/app-icon/win/app.ico",
    "package:linux": "electron-packager ./app --overwrite --platform=linux --arch=x64 --out=out"
  },

注意： ./app 是我自己的项目目录，out 是打包后存放的目录名，实际情况请自行修改

打包对应的版本只需只需相关的命令即可，例如打包 mac 版本：npm run-script package:mac 即可。

这里会有个小问题，后面说。

electron-builder

使用命令：npm install electron-builder -g 可安装相关模块，我的安装全局才可用！

安装完后最好查看下是否成功： electron-builder version

成功后编辑项目文件夹下的 package.json 文件，添加electron builder编译所需要的属性

"scripts": {
    "start": "electron .",
    "dev": "electron . --debug",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "build": {
      "appId": "site.suremotoo",
      "copyright": "Suremotoo",
      "productName": "e-tools",
      "dmg": {
        "background": "app/assets/app-icon/png/app.icns",
        "window": {
          "x": 100,
          "y": 100,
          "width": 500,
          "height": 300
        }
      },
      "win": {
        "icon": "app/assets/app-icon/win/app.ico"
      }
    }

注意： build 属性均是演示数据，实际情况请自行修改。

具体的属性可参考官方文档

一次打包所有平台命令有3种，任选其一：

electron-builder -mwl
electron-builder --platform=all
electron-builder --win --x64

具体打包命令参数，也是任选其一:

Mac 版

electron-builder -m
electron-builder -o
electron-builder --mac
electron-builder --macos
electron-builder --platform=mac
electron-builder --platform=darwin

Windows 版

electron-builder -w
electron-builder --win
electron-builder --windows
electron-builder --platform=win
electron-builder --platform=win32

Linux 版

electron-builder -l
electron-builder --linux
electron-builder --platform=linux

打包对应的版本只需只需相关的命令即可，例如打包所有版本：npm run-script pack 或者 npm run-script dist 即可。

提示：如果只是执行 electron-builder 命令，默认会根据当前系统打包哟~

上面提到的问题

electron打包的时候需要下载一个版本库，速度会非常慢，即使开代理了，都不一定能解决，这里可以通过淘宝镜像源解决。

对于 cnpm 和 yarn，我都没有过多使用，我比较喜欢传统的 npm，也是最可靠的，唯一的缺点就是慢。一般都用 npm install 可以解决，像这种打包需要某种文件，这个我觉得临时使用镜像还是可以的。

以 electron-duilder 打包为例：

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ 你的命令
// 比如打包所有平台
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/  electron-builder --platform=all