Electron（最初名为Atom Shell[3]）是GitHub开发的一个开源框架。它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发，著名项目包括GitHub的Atom和微软的Visual Studio Code。

1. 环境配置

Electron配置

# 克隆示例项目的仓库
$ git clone [https://github.com/electron/electron-quick-start](https://github.com/electron/electron-quick-start)
# 进入这个仓库
$ cd electron-quick-start
# 安装依赖并运行
$ npm install && npm start

或者下载最新的electron-api-demos或者electron-quick-start，解压后进入目录

# 进入样例目录

$cd electron-api-demos 或者 cd electron-quick-start

# 安装依赖并运行

$ npm install

$  npm start

#（官方建议使用如下命令，可以在不同的app中使用不同的electron版本）

$ npm install --save-dev electron

PS：由于外国站定总是卡的很，甚至无法连接，可以选择淘宝的。

npm install cnpm -g --registry=http://registry.npm.taobao.org 
cnpm install --save-dev electron

再PS：遇到问题不识别cnpm。。。注意配置环境变量

可以使用Visual Studio Code导入工程

Electron-api-demos
Electron-quick-start

2. 打包

打包为asar，安装asar

$ npm install -g asar

将项目打包为asar文件，进入项目electron-api-demos的上一级目录执行：

$ asar pack electron-api-demos app.asar

打包为EXE，在工程中的package.json文件里定义了打包的参数：

"package": "electron-packager . Hello --platform=win32 --arch=x64 --icon=app.ico --out=./out --asar --app-version=0.0.1",

2.1. Electron-packager

Electron-packager 是打包工具，如果未安装可以使用如下命令安装：

$ npm install electron-packager -g

• 第二个 “.”表示当前目录，如果在当前目录下的APP子目录那么就写./APP；
• 第三个参数是应用的名称
  --platform表示平台的类型：win32是windows系统；
  --arch设置是32位处理器还是64位;
  --icon设置图标
  --out设置输出路径
  --asar（不知道干啥的）
  --app-version设置应用程序版本
  在工程目录下运行下面命令打包应用程序为EXE可执行文件

$ npm run-script package

2.2. electron-builder

Electron-builder用起来要比packager方便，而且打包的更好，更小。
首先来看看什么是electron-builder，来自官方的解释：

A complete solution to package and build a ready for distribution Electron, Proton Native or Muon app for macOS, Windows and Linux with “auto update” support out of the box.

简单的说，electron-builder就是有比electron-packager有更丰富的的功能，支持更多的平台，同时也支持了自动更新。除了这几点之外，由electron-builder打出的包更为轻量，并且可以打包出不暴露源码的setup安装程序。考虑到以上几点，我果断选择了electron-builder。

首先，依旧是安装依赖。 （这里官方强烈推荐使用yarn安装依赖包，但我使用了npm安装的依赖也可以正常打包，所以至于为什么官方强烈推荐用yarn，我还没搞懂其原因，还请了解缘由的大佬们赐教）

yarn add electron-builder 

在package.json中做如下配置

"build": {
    "appId": "com.xxx.app",
    "mac": {
      "target": ["dmg","zip"]
    },
    "win": {
      "target": ["nsis","zip"]
    }
},"scripts": {
    "dist": "electron-builder --win --x64"
},

在命令行中执行npm run dist ，执行结果如下：

打包后在dist目录生成如下文件：

解压zip包或执行setup安装文件，应用启动后且没有报错，则说明本次打包成功。

特点：
1、electron-builder 可以打包成msi、exe、dmg文件，macOS系统，只能打包dmg文件，window系统才能打包exe，msi文件；
2、几乎支持了所有平台的所有格式；
3、支持Auto Update；
4、支持CLI和JS API两种使用方式；