随着 Web 技术的发展，越来越多的开发者希望通过 Web 技术来构建桌面应用。Electron 是一个流行的框架，允许开发者使用 Web 技术（HTML、CSS 和 JavaScript）来创建跨平台的桌面应用。本文将介绍如何使用 Electron 构建、打包和分发桌面应用。
Electron 是由 GitHub 开发的开源框架，它允许开发者使用 Web 技术构建桌面应用。Electron 提供了许多原生应用的特性，如安装程序、自动更新、崩溃报告和通知。可以将 Electron 视为 Web 应用的包装器，它创建可在不同操作系统上运行的可执行文件，并提供与底层操作系统通信的方式。这样，就不需要为每个操作系统创建单独的应用了。
使用 Electron 创建最简单的桌面混合应用通常需要三个文件：Index.html、Main.js 和 Package.json。
Index.html 是一个 HTML 文档，包含想要展示的 Web 内容。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>First Hybrid app!</title>
</head>
<body>
<h1>Hello From Electron Side!</h1>
</body>
</html>
Main.js 是一个 JavaScript 文件，用于启动应用并创建操作系统中的容器来渲染 HTML 文件。例如：
'use strict';
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.webContents.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', function() {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function() {
if (mainWindow === null) {
createWindow();
}
});
Package.json 是一个配置文件，包含应用应该从哪个文件开始启动，以及应用依赖的列表。例如：
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron main.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/atom/electron-quick-start.git"
},
"keywords": [
"Electron",
"quick",
"start",
"tutorial"
],
"author": "GitHub",
"license": "CC0-1.0",
"bugs": {
"url": "https://github.com/atom/electron-quick-start/issues"
},
"homepage": "https://github.com/atom/electron-quick-start#readme",
"devDependencies": {
"electron-prebuilt": "^0.36.0"
}
}
创建了最简单的 Electron 应用后，需要在操作系统上构建和测试它。本文以 Windows 操作系统为例，但这个过程对于 Linux 和 OS X 也是相同的。
如果安装了预构建的示例项目，可以跳过这一步，直接进行下一步。如果没有，需要安装配置文件中列出的依赖。打开命令行，切换到包含这三个文件的目录（称之为根目录），然后执行以下命令：
npm install
这将安装配置文件中列出的依赖。
接下来，将安装一个名为 electron-packager 的预构建包，它将三个文件打包成操作系统可执行文件。要安装这个包，请在命令行工具中执行以下命令：
npm install electron-packager -g
这里的 -g 表示这个库将在机器上全局安装，以后可以重复使用它。
现在打开 package.json 文件，并在 scripts 部分添加以下脚本：
"build": "electron-packager . myapp --platform=win32 --arch=x64 version=0.36.12"
scripts 部分现在看起来像这样：
"scripts": {
"start": "electron main.js",
"build": "electron-packager . --platform=win32 --arch=x64"
}
然后，在命令行工具中运行以下脚本：
npm run build
这将执行脚本并将文件打包成 Windows x64 的可执行文件。可以在根目录中新创建的文件夹（version=0.36.12-win32-x64）中找到可执行应用。可以在 https://www.npmjs.com/package/electron-packager 查找平台和架构的可用选项。
现在有了一个作为桌面应用运行的 Web 应用。从这一点开始，可以随意修改 HTML 文件或 JS 文件，而不需要再次执行构建脚本。可以在新目录（根目录 -> version=0.36.12-win32-x64 -> resources-> app）中找到源文件，可以修改它们并直接运行可执行文件以查看更改。
当然，不想复制所有这些文件并发送给朋友或客户，所以让制作一个可执行文件，可以分发它以在其他机器上使用。要创建安装程序，需要一个名为 "grunt electron installer" 的库，以及这个库依赖的其他两个库，还需要在根目录中添加一个新的配置文件。
要添加这些库，请依次执行以下命令：
npm install grunt-cli -g
npm install grunt
npm install grunt-electron-installer
在根目录中，添加一个新文本文件并将其重命名为 gruntfile.js。这个文件的内容如下：
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
'create-windows-installer': {
x64: {
appDirectory: 'version=0.36.12-win32-x64',
outputDirectory: 'build/',
authors: 'Banan IT.',
exe: 'BSc.exe',
noMsi: true
}
}
});
grunt.loadNpmTasks('grunt-electron-installer');
};
这段简单的代码是一个 JavaScript 函数，它将为运行一个任务来创建安装程序。请注意，应用程序目录指的是包含可执行文件的文件夹，输出目录指的是将包含安装程序的文件夹。