1. 对于 Electron
Electron 是由 Github 开发，用 HTML，CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。Electron 通过将 Chromium 和 Node.js 合并到前端培训同一个运行时环境中，并将其打包为 Mac，Windows 和 Linux 零碎下的利用来实现这一目标。
为了放弃 Electron 的玲珑 (文件体积) 和可持续性开发 (以防依赖库和 API 的泛滥)，Electron 限度了所应用的外围我的项目的数量。比方 Electron 只用了 Chromium 的渲染库而不是其全副组件。这使得降级 Chromium 更加容易，但也意味着 Electron 短少了 Google Chrome 里的一些浏览器相干的个性。增加到 Electron 的新性能应该次要是原生 API。如果能够的话，一个性能应该尽可能的成为一个 Node.js 模块。
2. 开发环境
能够应用原生的 Node.js 开发环境来开发 Electron 利用。为了打造一个 Electron 桌面程序的开发环境，你只须要装置好 Node.js、npm、一个棘手的代码编辑器以及对你的操作系统命令行客户端有根本理解。咱们以比拟常见的 windows 开发环境（win7 以上）为例：
首先，装置最新版本的 node.js。举荐装置最新的长期反对的版本。在装置过程中的配置界面请勾选 node.js runtime、npm package manager 和 add to path 这三个选项。可通过以下命令来确认 node 和 npm 曾经装置实现。
3. 打造一个简略的 Electron 利用
Electron 能够让你应用纯 JavaScript 调用丰盛的原生(操作系统) APIs 来发明桌面利用。你能够把它看作一个 Node. js 的变体，它专一于桌面利用而不是 Web 服务器端。这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。相同，Electron 应用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 管制的，精简版的 Chromium 浏览器。
从开发的角度来看, Electron application 实质上是一个 Node. js 应用程序。与 Node.js 模块雷同，利用的入口是 package.json 文件。一个最根本的 Electron 利用一般来说会有如下的目录构造：
your-app/
├── package.json
├── main.js
└── index.html
为你的新 Electron 利用创立一个新的空文件夹。关上你的命令行工具，而后从该文件夹运行 npm init
npm 会帮忙你创立一个根本的 package.json 文件。其中的 main 字段所示意的脚本为利用的启动脚本，它将会在主过程中执行。如下片段是一个 package.json 的示例：
{
“name”: “demo”,
“version”: “1.0.0”,
“description”: “test”,
“main”: “index.js”,
“scripts”: {
"test": "echo \"Error: no test specified\"&& exit 1"},
“author”: “”,
“license”: “ISC”
}
留神：如果 main 字段没有在 package.json 中呈现，那么 Electron 将会尝试加载 index.js 文件（就像 Node.js 本身那样）。如果你理论开发的是一个简略的 Node 利用，那么你须要增加一个 start 脚本来指引 node 去执行以后的 package, 把这个 Node 利用转换成一个 Electron 利用也是非常简单的，咱们只不过是把 node 运行时替换成了 electron 运行时。
{
“name”: “demo”,
“version”: “1.0.0”,
“description”: “test”,
“main”: “index.js”,
“scripts”: {
"start": "electron ."},
“author”: “”,
“license”: “ISC”}
4. 开发一个简略的 electron
Electron apps 应用 JavaScript 开发，其工作原理和办法与 Node.js 开发雷同。electron 模块蕴含了 Electron 提供的所有 API 和性能，引入办法和一般 Node.js 模块一样。
electron 模块所提供的性能都是通过命名空间裸露进去的。比如说：electron.app 负责管理 Electron 应用程序的生命周期，electron.BrowserWindow 类负责创立窗口。上面是一个简略的 main.js 文件，它将在应用程序准备就绪后关上一个窗口。
您该当在 main.js 中创立窗口，并处理程序中可能遇到的所有零碎事件。上面咱们将欠缺上述例子，增加以下性能：关上开发者工具、解决窗口敞开事件、在 macOS 用户点击 dock 上图标时重建窗口，增加后，main. js 就像上面这样：
const {app, BrowserWindow} = require(‘electron’)
function createWindow () {
// 创立浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {nodeIntegration: true}})
// 并且为你的利用加载 index.html
win.loadFile(‘index.html’)
// 关上开发者工具
win.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 局部 API 在 ready 事件触发后能力应用。
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on(‘window-all-closed’, () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分利用及其菜单栏会放弃激活。
if (process.platform !== ‘darwin’) {
app.quit()}
})
app.on(‘activate’, () => {
// 在 macOS 上，当单击 dock 图标并且没有其余窗口关上时，
// 通常在应用程序中从新创立一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()}
})
// In this file you can include the rest of your app’s specific main process
// code. 也能够拆分成几个文件，而后用 require 导入。
5. 启动利用
在创立并初始化实现 main.js、index.html 和 package.json 之后，您就能够在以后工程的根目录执行 npm start 命令来启动刚刚编写好的 Electron 程序了。