Electron 应用打包

Question

当我们使用了 Electron 开发完应用后，一定想着如何打包成 exe 文件，打包的方式有很多，甚至根据你使用不同的前端框架，打包方式也会有所不同。这里我们就学习原汁原味的打包方式，用 electron-package 打包。

一、安装 electron-package

定位到项目根目录下，然后使用 npm 来安装 electron-packager 当然你也可以使用 yarn 来进行安装

//npm
npm install electron-packager --save-dev
//yarn
yarn add electron-packager --dev

在工作中我习惯于用 yarn 来进行安装。安装完成后会在 package.json 文件中看到如下代码：

"devDependencies": {
    "electron-packager": "^14.2.1"
  }

从代码中可以看出我目前的版本是 14.2.1

二、第一种打包方法（不建议）

第一种打包方法就是直接在命令行中输入 electron-packager，然后后边跟着 6 个打包参数，这种方法太难了。

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

参数说明：

• location of project : 项目所在路径
• name of project : 打包的项目名称
• platform : 确定了你要构建哪个平台的应用（Windows、Mac还是Liux）
• architecture：决定了使用x86还是x64还是两个架构都需要
• electron version：electron 的版本
• optional options：可选选项

这个命令太长了，每次要是都用这个命令来打包会很烦，所以推荐使用第二种方法：

三、第二种打包方法

打开 package.json 文件，在 scripts 下添加代码

"packager": "electron-packager ./ HelloWorld --all --out ./outApp  --overwrite --icon=./app/img/icon/icon.ico"

在项目中新建 outAPP 文件夹。

使用 npm run-script packager 就可以进行打包了，打包的时间会非常长，而且如果你安装了一些安全软件，还要时刻看着安全软件的禁止操作，如果不小心被禁止掉了，可能会造成打包的失败。