Electron是什么呢？
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。
这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
一、环境准备
本地环境：Node.js + npm
# 下面这行的命令会打印出Node.js的版本信息
node -v
# 下面这行的命令会打印出npm的版本信息
npm -vCopy二、目录结构
从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构：
your-app/
├── package.json
├── main.js
└── index.html为你的新Electron应用创建一个新的空文件夹，并新建上述三个文件。
三、package.json
其中package.json的文件内容如下：
{
"name": "my-app",
"version": "0.1.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC"
}Tips：使用
npm init命令可以便捷创建package.json。
四、安装Electron
在终端进入到工程文件夹下进行操作，会在当前目录下安装Electron。
# 局部安装 需要的话追加上 --registry='http://registry.npm.taobao.org' 使用淘宝npm源安装
npm install electron --save-dev
# Windows使用下面语句 64位32位机器都是--win32
npm install electron --save-dev --platform=win32
# 验证安装
node_modules/.bin/electron -vTips：--save-dev参数会在
package.json文件中导入该依赖到devDependencies属性下，--save参数会导入该依赖到dependencies属性下。
安装过程可能会很慢，正常的话，安装下载进度如下直至完成。
> electron@5.0.6 postinstall /home/qii/electron/eee/node_modules/electron
> node install.js
Downloading tmp-26643-1-SHASUMS256.txt-5.0.6
[============================================>] 100.0% of 4.74 kB (4.74 kB/s)
npm notice created a lockfile as package-lock.json. You should commit this file.
+ electron@5.0.6
updated 1 package and audited 201 packages in 499.235s
found 0 vulnerabilitiesTips：npm安装超时的话一般是网络问题。解决方法
五、main.js
package.json中指定的入口点文件，即程序主文件。
const {app, BrowserWindow} = require('electron')
let mainWindow
// 创建主窗口，设置了宽高等信息
function createWindow () {
mainWindow = new BrowserWindow({
1000,
height: 600,
webPreferences: {
// node集成，即是否注入node能力
nodeIntegration: true
}
})
// 加载主页面内容 index.html
mainWindow.loadFile('index.html')
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)六、index.html
main.js中加载的主窗口文件，即主布局文件
<!DOCTYPE html>
<html>
<head>
<!-- 此title会覆盖package.json中设置的name，作为应用顶部名称 -->
<title>my-app</title>
</head>
<body>
Hello World!
</body>
</html>七、启动应用
在创建并初始化完成 main.js、 index.html和package.json之后，您就可以在当前工程的根目录执行下述命令来启动刚刚编写好的Electron程序了。
# 进入到包含 package.json 文件的目录
npm satrt
# 或者直接使用脚本启动，别忽略了后面的点
node_modules/.bin/electron .八、打包应用
以上所述都是在本地开发环境下使用，但如果要给被人使用，就必须得将Electron打包成一个程序包。幸运的是我们可以通过electron-builder将程序打包成Win、Linux、Mac平台都兼容的版本，交给别人之后直接安装即可。
1、安装electron-builder
npm install --save-dev electron-builder
# 验证安装
node_modules/.bin/electron-builder -h2、开始打包
注意生成各自平台的程序包最好在对应平台上执行，否则可能打包失败
# Linux打包成AppImage文件（在Linux环境上执行）
node_modules/.bin/electron-builder -l AppImage
# Windows打包成exe安装文件（在Windows环境下执行）
node_modules/.bin/electron-builder -w nsis
# 如果在非Windows上打包win程序，也可以借助docker 如下
# docker run --rm -it -v ${PWD}:/project electronuserland/builder:wine sh -c "node_modules/.bin/electron-builder -w nsis"
# Mac打包成dmg文件（在Mac环境下执行）
node_modules/.bin/electron-builder -m dmg3、最终文件
打包好的程序在当前目录dist文件夹下，如图所示：
- Linux生成
my-app 0.1.0.AppImage文件，双击执行或者./my-app 0.1.0.AppImage执行即可。 - Windows生成
my-app 0.1.0.exe文件，双击安装即可。 - Mac生成
my-app 0.1.0.dmg，双击拖拽安装即可。
4、利用配置文件打包
上面的方法相当于临时打包，每次运行命令的时候都要指定打包命令，虽然很直接，但是有点不太方便，下面用另一种方法来打包，将打包配置写到package.json中 ，方便使用。
打开package.json文件，发现前面的 devDependencies 属性下已经多出了 electron 和 electron-builder 依赖，我们将与打包相关的配置信息全部写在build属性下，再添加脚本命令"dist": "electron-builder"。
{
"name": "my-app",
"version": "0.1.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"dist": "electron-builder"
},
"author": "",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^6.0.12",
"electron-builder": "^21.2.0"
},
"build": {
"win": {
"icon": "icon.png",
"target": [
"nsis"
]
},
"nsis": {
"allowToChangeInstallationDirectory": true,
"oneClick": false,
"menuCategory": true,
"allowElevation": false
},
"linux": {
"icon": "icon.png",
"category": "Utility",
"target": [
"AppImage"
]
},
"mac": {
"icon": "icon.png",
"type": "development",
"category": "public.app-category.developer-tools",
"target": [
"dmg"
]
}
}
}运行命令：
npm run dist九、进阶之路
Electron给我的认识是使用HTML文件渲染页面组件、使用CSS渲染页面组件的样式，使用JavaScript编写程序的逻辑，且支持Node以及DOM的API。
我在学习Electron的时候，写了一个本地音乐播放器的小项目，在这个项目中涉及了主进程与渲染进程如何通信，如何使用CSS样式，如何使用electron-store本地存储。
项目的地址：https://github.com/yueshutong/SimpleMusicPlayer 欢迎Star！