前言
软件开发人经常说到：桌面应用 Web 化，Electron 却反其道而行之，这是为什么呢？
每一个技术的出现都是为了解决一定的问题。
既然要说 Electron，那么了解一下其背景也是很有必要的。
诞生
Electron 的出现最初是因为 Github 想要开发一个可编程的文本编辑器 Atom，在开发 Atom 的过程中，Electron 被作为其框架而诞生。
历史
- 2013年4月 Atom Shell 项目启动。
- 2014年5月 Atom Shell 被开源。
- 2015年4月 Atom Shell 被重命名为 Electron。
- 2016年5月 Electron 发布了 v1.0.0 版本。
- 2016年5月 Electron 构建的应用程序可上架 Mac App Store。
- 2016年8月 Windows Store 支持 Electron 构建的应用程序。
关于
可以看到 Electron 最初只是 Atom 编辑器的框架，它通过将 Chromium 和 Node.js 合并到同一个运行时环境中，使得开发者可以使用 HTML、CSS、JavaScript 这些前端技术栈来开发跨平台的桌面应用程序。
关键点是：使用前端技术栈，开发跨平台的桌面应用程序。
为什么用它？
Electron 也算是一种 Hybrid App，所以他开发的 Native 性能体验上肯定是不如原生应用的。那为什么要用 Electron？为什么又要把 Web 应用桌面化？
通过搜集的一些资料来看，较为重点的原因有以下几点：
- 需要使用 Native API
- 拥有离线可用的功能
- 没有专门的 Native 工程师
- 需要快速交付
综合考虑来看的话，我认为（并不官方）更加适合开发快速迭代的工具型应用。
扩展
相似的技术还有 NW.js。
尝鲜
环境与依赖
- node
- windows 7+
- electron
node 安装
目前建议下载安装 12.16.1，这是一个 LTS 版本。
在安装的过程中，建议将 node 添加到环境变量。
创建一个 electron 的 demo
在一个自己喜欢的位置创建一个文件夹，比如：
# 新建文件夹
mkdir electron_test
# 之后进入文件夹
cd .\electron_test\
# 初始化为一个 npm 项目
npm init -y
# 安装 electron
npm install --save-dev electron
# 验证 electron
npx electron编辑入口文件
在 根目录分别新建文件 main.js 和 index.html。
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello electron</h1>
</body>
</html>// main.js
const { app, BrowserWindow } = require('electron')
app.on('ready', () => {
let win = new BrowserWindow({
width: 500,
height: 300
})
win.loadFile('index.html')
})修改 package.json
其他的内容省略掉啦。
{
"main": "main.js",
"scripts": {
"start": "electron ."
}
}启动
npm start小结
通过一个简单的尝试，可以看出来 Electron 的技术栈是 Web 前端 友好的，如果你是一名 Web 前端工程师 那么我相信你也会无论如何先来这么一口的。
众所周知的，VSCode 是使用 Electron 开发的一个成功的案例。如果你还不确定 Electron 适合做些什么，或者想要知道还有哪些成功的案例，你可以查看更多。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。