Electron 简介与快速上手：前端技术构建跨平台应用
引言：桌面应用开发的痛点与 Electron 的诞生
在软件开发的广阔领域中，桌面应用始终占据着重要的一席之地。它们通常提供更深入的系统集成、更流畅的性能以及离线工作的能力，是许多专业工具和用户日常使用的核心。然而，传统的桌面应用开发一直面临着一个显著的挑战：平台割裂。
如果你想为 Windows、macOS 和 Linux 这三大主流桌面操作系统开发应用，通常需要掌握不同的编程语言、框架和开发工具。例如，Windows 平台可能偏向 C# (.NET) 或 C++，macOS 倾向于 Swift 或 Objective-C，而 Linux 则可能有 GTK+ 或 Qt 等 C++ 框架。这意味着你需要维护多支开发团队，或者让少数开发者在不同技术栈之间频繁切换，这无疑增加了开发成本、延长了开发周期，并使得代码复用变得异常困难。
对于数以百万计的前端开发者来说，他们精通 HTML、CSS 和 JavaScript，这些技术在 Web 开发领域创造了无数奇迹。他们渴望能够利用自己熟悉的工具和技能，将 Web 应用的丰富交互和快速迭代能力带到桌面环境中。
正是在这样的背景下，Electron 应运而生。由 GitHub（现为 Microsoft 子公司）开发的 Electron 是一个开源框架，它允许开发者使用纯粹的 Web 技术——HTML、CSS 和 JavaScript——来构建原生的、跨平台的桌面应用程序。Electron 的出现，极大地降低了桌面应用开发的门槛，尤其是对于广大的前端开发者群体。
本文将深入探讨 Electron 的核心概念、工作原理、优势，并带领读者一步步完成一个简单的 Electron 应用的快速搭建与运行，帮助你迈出使用前端技术构建跨平台桌面应用的第一步。
Electron 是什么？核心组成解析
简单来说，Electron 就是一个“包裹”了你的 Web 应用的运行时环境，并赋予它访问操作系统底层能力的权限。它的核心由两个久经考验的技术组成：
- Chromium: 这是 Google Chrome 浏览器背后的开源渲染引擎。Chromium 负责处理 Electron 应用的用户界面，解析 HTML、渲染 CSS，并执行运行在渲染进程中的 JavaScript 代码。本质上，Electron 的每个窗口都是一个独立的 Chromium 网页实例。
- Node.js: 这是一个基于 Chrome V8 JavaScript 引擎的 JavaScript 运行时环境。Node.js 赋予了 JavaScript 在服务器端和操作系统环境中运行的能力。在 Electron 中，Node.js 运行在主进程中，负责管理应用程序的生命周期、与操作系统进行交互（如访问文件系统、网络、创建菜单、显示通知、管理窗口等），并提供强大的 npm 生态系统的支持。
Electron 将这两者巧妙地结合起来。Chromium 负责呈现你用 HTML、CSS、JavaScript 构建的精美界面，而 Node.js 则在后台为你提供与操作系统交互的能力。通过 Electron 提供的 API，运行在 Chromium（渲染进程）中的 JavaScript 可以请求运行在 Node.js（主进程）中的 JavaScript 执行原生操作，反之亦然。
这种架构使得前端开发者无需学习复杂的原生语言和框架，就能开发出外观和行为都像原生桌面应用的产品。许多知名的应用都是基于 Electron 构建的，例如：
- Visual Studio Code (VS Code): 可能是最著名的 Electron 应用，一个功能强大的代码编辑器。
- Slack: 流行的团队协作工具。
- Discord: 游戏玩家和社区的语音/文本聊天平台。
- Spotify: 流媒体音乐服务（桌面客户端）。
- Microsoft Teams: Microsoft 的团队协作平台。
- Figma: 基于云的设计工具（桌面客户端）。
- 还有很多其他应用……
这些成功案例充分证明了 Electron 构建复杂、高性能桌面应用的可行性和强大能力。
为什么选择 Electron？它带来的优势
使用 Electron 开发桌面应用，相比传统的原生开发或一些其他跨平台方案，具有许多显著的优势：
- 充分利用前端技术栈： 这是 Electron 最核心的吸引力。如果你或你的团队是前端背景，可以立即开始构建桌面应用，无需学习新的语言和框架。这大大缩短了学习曲线，提高了开发效率。
- 跨平台一致性： Electron 应用的界面是基于 Web 技术渲染的，因此在不同操作系统上具有高度一致的外观和行为。这减少了针对特定平台进行 UI 适配和测试的工作量。
- 丰富的生态系统支持： 得益于 Node.js，你可以直接在 Electron 应用中使用 npm 上数以百万计的模块。无论是处理文件、进行网络请求、使用数据库，还是集成各种第三方服务，几乎都能找到现成的解决方案。
- 快速开发与迭代： Web 开发一向以其快速的原型构建和迭代能力著称。在 Electron 中，你可以享受到同样的高效率。修改代码后，通常只需重启应用或甚至在开发者工具中刷新即可看到效果。
- 访问原生系统功能： Electron 提供了丰富的 API，允许你的 Web 应用访问操作系统的底层功能，如文件系统、剪贴板、通知、原生菜单、对话框、电源状态、窗口管理等。这些功能使得 Electron 应用不仅仅是一个 Web 页面，而是真正的桌面应用程序。
- 强大的开发者工具： Electron 应用内置了 Chromium 开发者工具，你可以像调试网页一样调试你的桌面应用（包括 JavaScript、CSS 和网络请求）。此外，Node.js 的调试工具也可以用于调试主进程代码。
- 庞大的社区与成熟度： Electron 已经被广泛采用多年，拥有庞大的开发者社区。这意味着你可以轻松找到文档、教程、解决方案和社区支持。框架本身也在不断地更新和改进。
Electron 的核心概念：主进程与渲染进程
理解 Electron 的核心在于区分主进程 (Main Process) 和渲染进程 (Renderer Process)。这是 Electron 架构的基石。
主进程 (Main Process)
- 角色： 应用程序的入口点和管理者。它运行 Node.js 环境，负责应用的生命周期、创建和管理窗口、注册全局快捷键、处理系统事件（如应用就绪、窗口关闭）、创建原生菜单、显示通知和对话框等。
- 权限： 拥有完整的 Node.js API 和 Electron API 访问权限。它可以直接与操作系统交互，例如读写文件、访问网络资源、创建子进程等。
- 数量： 一个 Electron 应用永远只有一个主进程。当你启动应用时，最先运行的就是主进程脚本（通常在
package.json的main字段指定）。
渲染进程 (Renderer Process)
- 角色： 负责渲染单个应用程序窗口的内容。每个 Electron 窗口（
BrowserWindow实例）都运行在一个独立的渲染进程中。它运行 Chromium 环境，加载并显示 HTML、CSS，并执行运行在其中的 JavaScript 代码。 - 权限： 运行在受沙箱限制的环境中，就像浏览器中的普通网页一样。默认情况下，渲染进程无法直接访问 Node.js API 或 Electron 的原生 API。这主要是出于安全考虑，防止恶意网页内容损害用户系统。
- 数量： 每个窗口对应一个渲染进程。因此，一个应用可以有多个渲染进程。
进程间通信 (IPC)
既然主进程负责原生能力，而渲染进程负责 UI 呈现，并且渲染进程默认无法直接访问原生能力，那么它们之间如何协作呢？这就需要进程间通信 (IPC) 机制。
Electron 提供了 ipcMain 和 ipcRenderer 模块来实现主进程和渲染进程之间的双向通信：
ipcRenderer: 运行在渲染进程中。用于向主进程发送异步或同步消息。ipcMain: 运行在主进程中。用于监听来自渲染进程的消息，并可以回复消息。
例如，如果用户在某个窗口（渲染进程）中点击了一个按钮，想要打开一个文件选择对话框（这是一个原生操作，需要主进程完成），流程会是这样：
- 渲染进程中的 JavaScript 捕获按钮点击事件。
- 渲染进程使用
ipcRenderer.send()方法向主进程发送一条消息（例如，消息名是'open-file-dialog'）。 - 主进程使用
ipcMain.on()方法监听'open-file-dialog'消息。 - 主进程接收到消息后，调用 Electron 的
dialog.showOpenDialog()API 打开对话框。 - 用户选择文件后，主进程获取到文件路径。
- 主进程可以使用
event.reply()或webContents.send()方法（如果需要主动推送）向发起请求的渲染进程发送回复消息，携带文件路径信息。 - 渲染进程使用
ipcRenderer.on()监听回复消息，然后根据文件路径更新 UI 或执行其他操作。
理解 IPC 是构建非简单 Electron 应用的关键。
预加载脚本 (Preload Script) 与 上下文隔离 (Context Isolation)
在早期，为了让渲染进程能够访问 Node.js 或 Electron API，开发者有时会在渲染进程中直接启用 Node.js 集成。但这是一个严重的安全漏洞，如果应用加载了外部的、不受信任的内容，恶意脚本可以在渲染进程中获得完整的 Node.js 权限，从而访问用户的文件系统等。
为了解决这个问题，Electron 引入了预加载脚本 (Preload Script) 和 上下文隔离 (Context Isolation)。
- 预加载脚本 (
preload.js)： 这是一个特殊的脚本，在渲染进程加载其内容（HTML 文件）之前运行，并且运行在一个独立且安全的上下文中。这个上下文可以访问 Node.js 和 Electron API，但它与渲染进程的全局window对象是隔离的。 - 上下文隔离 (
contextIsolation)： 这是 Electron 默认开启（且强烈建议保持开启）的安全特性。它确保预加载脚本运行的上下文与渲染进程中的普通网页脚本运行的上下文完全分离。这意味着网页脚本无法直接访问预加载脚本中定义的变量或引入的 Node.js 模块。
那么渲染进程如何通过预加载脚本访问原生能力呢？通过 contextBridge 模块。预加载脚本可以使用 contextBridge.exposeInMainWorld() 方法，将精心挑选的、安全的 API 或函数暴露给渲染进程的全局 window 对象。渲染进程的脚本只能通过这些暴露出来的接口与预加载脚本通信，进而间接地利用预加载脚本中的 Node.js/Electron 能力。
例如：
在 preload.js 中：
“`javascript
const { contextBridge, ipcRenderer } = require(‘electron’);
contextBridge.exposeInMainWorld(‘electronAPI’, {
sendToMain: (channel, data) => ipcRenderer.send(channel, data),
onFromMain: (channel, callback) => ipcRenderer.on(channel, callback),
// 暴露一个获取应用信息的接口
getAppInfo: () => ({
node: process.versions.node,
chrome: process.versions.chrome,
electron: process.versions.electron
})
});
“`
在 renderer.js 中（加载在 index.html 中）：
“`javascript
// 通过预加载脚本暴露的接口调用
window.electronAPI.sendToMain(‘some-message’, ‘hello from renderer’);
window.electronAPI.onFromMain(‘reply-message’, (event, data) => {
console.log(‘Received reply:’, data);
});
const appInfo = window.electronAPI.getAppInfo();
console.log(‘App Info:’, appInfo);
“`
这种模式极大地提高了应用的安全性，是现代 Electron 开发的推荐实践。
Electron 快速上手：构建你的第一个应用
现在，我们来通过一个简单的“Hello Electron”应用，快速体验一下 Electron 的开发流程。
1. 环境准备
确保你的开发环境中已经安装了 Node.js 和 npm（或者 yarn/pnpm）。Electron 的推荐 Node.js 版本可以在其官方文档中找到，通常使用最新的 LTS 版本即可。
可以通过以下命令检查 Node.js 和 npm 是否安装成功及版本：
bash
node -v
npm -v
如果未安装，请前往 Node.js 官网 (https://nodejs.org/) 下载安装包进行安装。
2. 创建项目目录并初始化 npm
创建一个新的文件夹作为你的项目根目录，并在终端中进入该目录。
bash
mkdir electron-quick-start
cd electron-quick-start
初始化 npm 项目：
bash
npm init -y
这将会在你的项目根目录创建一个 package.json 文件，包含了项目的基本信息。-y 参数会使用默认值快速生成文件。
3. 安装 Electron
在项目目录中，使用 npm 安装 Electron。通常我们将 Electron 安装为开发依赖，因为它只在开发和打包阶段需要，最终的应用运行时包含 Electron。
bash
npm install electron --save-dev
这会下载 Electron 及其相关的依赖，并将其添加到 package.json 的 devDependencies 字段中。
4. 项目文件结构
一个简单的 Electron 应用通常包含以下几个核心文件：
package.json: 项目配置文件，包含项目信息、依赖以及启动脚本等。main.js: 主进程脚本。应用的入口点，负责创建窗口、处理应用生命周期等。index.html: 渲染进程加载的页面。应用的 UI 界面，标准的 HTML 文件。preload.js: 预加载脚本。运行在渲染进程上下文隔离的环境中，用于安全地向渲染进程暴露 Node.js/Electron API。renderer.js: 渲染进程脚本。运行在index.html的上下文中，负责处理页面交互逻辑，通过预加载脚本与主进程通信。
我们将创建这些文件。
5. 编写主进程代码 (main.js)
创建 main.js 文件，并添加以下内容：
“`javascript
// main.js
const { app, BrowserWindow, ipcMain } = require(‘electron’);
const path = require(‘path’);
// 处理在开发模式下，可能无法直接加载html文件的问题（如果使用了某些构建工具）
// 这里为了简单，直接加载本地文件
function createWindow () {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// Important: 启用上下文隔离（Electron 12+ 默认为 true）
// 预加载脚本运行在独立上下文中
contextIsolation: true,
// 指定预加载脚本的路径
// __dirname 是当前文件 (main.js) 所在的目录
preload: path.join(__dirname, ‘preload.js’)
}
});
// 加载 index.html 文件
// 使用 file:// 协议加载本地文件
mainWindow.loadFile(‘index.html’);
// 打开开发者工具（可选，方便调试）
// mainWindow.webContents.openDevTools();
// 监听渲染进程通过预加载脚本发送的获取应用信息的请求
// ipcMain.handle 是处理异步请求的推荐方式 (Electron 9+)
// 如果使用 ipcMain.on 也行，但处理回复稍麻烦些
ipcMain.handle(‘get-app-info’, async () => {
return {
node: process.versions.node,
chrome: process.versions.chrome,
electron: process.versions.electron
};
});
}
// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(() => {
createWindow();
// 在 macOS 上，当点击 dock 中的应用图标时
// 并且没有其他窗口打开，则重新创建一个窗口
app.on(‘activate’, function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// 除了 macOS 外，当所有窗口都被关闭时退出应用
// 在 macOS 上，应用和它们的菜单栏通常保持活动状态，直到用户使用 Cmd + Q 明确退出
app.on(‘window-all-closed’, function () {
if (process.platform !== ‘darwin’) app.quit();
});
// 其他应用生命周期事件…
// app.on(‘before-quit’, …)
// app.on(‘quit’, …)
“`
代码解释：
require('electron'): 导入 Electron 模块，从中解构出app（控制应用生命周期）和BrowserWindow（创建窗口）。require('path'): Node.js 内置模块，用于处理文件路径，方便构建预加载脚本的绝对路径。createWindow()函数：定义了创建主应用窗口的逻辑。new BrowserWindow({...}): 创建一个新的浏览器窗口实例，并设置窗口的尺寸。webPreferences: 重要配置项。contextIsolation: true: 开启上下文隔离，确保渲染进程的脚本无法直接访问 Node.js 环境。这是 Electron 12+ 的默认行为，但明确写出有助于理解和兼容。preload: path.join(__dirname, 'preload.js'): 指定预加载脚本的路径。__dirname是当前文件所在的目录，path.join用于可靠地拼接路径。
mainWindow.loadFile('index.html'): 加载位于应用根目录的index.html文件到窗口中。mainWindow.webContents.openDevTools(): 打开与当前窗口关联的开发者工具（默认在单独窗口打开）。
ipcMain.handle('get-app-info', ...): 在主进程中监听一个名为'get-app-info'的消息。当渲染进程通过ipcRenderer.invoke('get-app-info')发送此消息时，主进程会执行回调函数，并将其返回值作为 Promise 的 resolve 值发送回渲染进程。这里返回了 Node.js、Chromium 和 Electron 的版本信息。app.whenReady().then(...): Electron 的核心事件。当 Electron 应用核心准备就绪时触发。我们在此事件发生后调用createWindow()函数创建主窗口。app.on('activate', ...): 监听activate事件。在 macOS 上，如果用户点击 Dock 中的应用图标且应用没有打开的窗口，会触发此事件，此时我们应重新创建窗口。app.on('window-all-closed', ...): 监听window-all-closed事件。当所有窗口都被关闭时触发。在 Windows 和 Linux 上，通常此时应该退出应用 (app.quit())；但在 macOS 上，用户习惯关闭窗口但不退出应用（类似 Finder 或 Safari），所以我们在此处判断如果不是 macOS (process.platform !== 'darwin') 才退出应用。
6. 编写预加载脚本 (preload.js)
创建 preload.js 文件，并添加以下内容：
“`javascript
// preload.js
const { contextBridge, ipcRenderer } = require(‘electron’);
// 使用 contextBridge.exposeInMainWorld 将 API 暴露给渲染进程
// ‘electronAPI’ 将成为 window 对象的一个属性
contextBridge.exposeInMainWorld(‘electronAPI’, {
// 暴露一个调用主进程 handle 的方法
// invoke() 用于发送一个需要主进程返回结果的异步消息
getAppInfo: () => ipcRenderer.invoke(‘get-app-info’),
// 示例：暴露一个发送普通异步消息的方法
// send() 用于发送不需要主进程立即回复的异步消息
sendMessage: (channel, data) => ipcRenderer.send(channel, data),
// 示例：暴露一个监听主进程发送消息的方法
// on() 用于订阅主进程的消息
onMessage: (channel, callback) => ipcRenderer.on(channel, (event, …args) => callback(…args))
});
// 可以在这里做一些其他预加载任务，比如设置全局变量等，
// 但要确保这些操作是安全的，且不会暴露不该暴露的信息给渲染进程。
console.log(‘Preload script loaded!’);
“`
代码解释：
require('electron'): 导入 Electron 模块，获取contextBridge和ipcRenderer。contextBridge.exposeInMainWorld('electronAPI', {...}): 这是将 API 从预加载脚本安全地暴露给渲染进程的关键方法。- 第一个参数
'electronAPI'是在渲染进程window对象上创建的属性名。 - 第二个参数是一个对象，其属性和方法将可以在渲染进程中通过
window.electronAPI.访问。
- 第一个参数
getAppInfo: () => ipcRenderer.invoke('get-app-info'): 暴露一个名为getAppInfo的函数给渲染进程。当渲染进程调用window.electronAPI.getAppInfo()时，实际上是调用了ipcRenderer.invoke('get-app-info')，这将向主进程发送一个'get-app-info'消息，并等待主进程的ipcMain.handle回复。sendMessage和onMessage: 示例展示如何暴露发送和接收普通异步消息的接口。尽管在这个简单示例中没有使用到，但在更复杂的应用中非常有用。
7. 编写渲染进程代码 (index.html 和 renderer.js)
创建 index.html 文件：
“`html
Hello Electron!
This is a simple cross-platform desktop application built with Electron.
Loading application info…
“`
创建 renderer.js 文件：
“`javascript
// renderer.js
// 这个脚本运行在 index.html 的上下文中
// 由于 contextIsolation 为 true，它无法直接访问 Node.js 或 Electron 内置模块 (如 require)
// 但可以通过预加载脚本 (preload.js) 暴露的全局对象访问某些功能
const information = document.getElementById(‘info’);
// 确保预加载脚本已经将 electronAPI 暴露到 window 对象上
if (window.electronAPI) {
// 通过预加载脚本暴露的 getAppInfo 方法调用主进程获取信息
window.electronAPI.getAppInfo()
.then(versions => {
// 接收到主进程返回的版本信息
information.innerText = This app is using Chrome (v${versions.chrome}), Node.js (v${versions.node}), and Electron (v${versions.electron});
})
.catch(err => {
console.error(‘Failed to get app info:’, err);
information.innerText = ‘Failed to load application info.’;
});
// 示例：通过预加载脚本发送一条消息给主进程 (即使主进程没有监听，这个调用也不会出错)
// window.electronAPI.sendMessage(‘renderer-ready’, ‘Renderer process is ready!’);
} else {
// 如果没有找到 electronAPI，说明 contextIsolation 可能未开启或 preload script 有问题
information.innerText = ‘Electron API not exposed. Context isolation might be disabled or preload script failed.’;
console.error(‘electronAPI not found on window object.’);
}
console.log(‘Renderer script loaded!’);
“`
代码解释：
index.html: 标准的 HTML 文件结构，包含一些文本和一个用于显示信息的段落 (<p id="info">)。通过<script src="./renderer.js"></script>引入渲染进程的 JavaScript 文件。Content-Security-Policy是一个重要的安全头部，限制了页面可以加载的资源来源。renderer.js:- 获取到 ID 为
info的 HTML 元素。 - 检查
window.electronAPI是否存在，这是通过预加载脚本暴露的接口。 - 如果存在，调用
window.electronAPI.getAppInfo()。注意，这个方法实际上是调用了ipcRenderer.invoke('get-app-info')。invoke返回一个 Promise，所以我们使用.then()来处理主进程返回的结果。 - 获取到版本信息后，更新页面的文本内容。
- 包含一些错误处理和调试输出。
- 获取到 ID 为
8. 配置启动脚本 (package.json)
编辑 package.json 文件，在 scripts 字段中添加一个 start 脚本，用于运行 Electron 应用。
json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js", <-- 指明主进程入口文件
"scripts": {
"start": "electron .", <-- 添加启动脚本
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"electron"
],
"author": "Your Name",
"license": "MIT",
"devDependencies": {
"electron": "^28.0.0" <-- 你安装的 Electron 版本
}
}
解释：
"main": "main.js": 告诉 Electron 应用程序启动时应该执行哪个脚本作为主进程。"scripts": {"start": "electron ."}: 定义了一个名为start的 npm 脚本。运行npm start时，npm 会执行electron .命令。electron .告诉 Electron 运行时加载当前目录下的 Electron 应用（它会查找package.json的main字段来找到主进程脚本）。
9. 运行你的应用
在终端中，进入你的项目目录，并运行启动脚本：
bash
npm start
或者使用 yarn 或 pnpm：
“`bash
yarn start
或 pnpm start
“`
如果一切顺利，你应该会看到一个标题为“Hello Electron!”的桌面窗口弹出，并在其中显示了你应用的 Chromium、Node.js 和 Electron 的版本信息。
恭喜你！你已经成功运行了你的第一个 Electron 应用。
10. 探索与调试
当应用运行时，你可以按 Ctrl+Shift+I (Windows/Linux) 或 Cmd+Option+I (macOS) 打开 Chromium 开发者工具。在这里，你可以像调试网页一样检查和修改 DOM 结构、查看 CSS 样式、调试渲染进程的 JavaScript 代码、查看网络请求（如果你的应用发起了网络请求）等。
对于主进程的调试，Electron 提供了一些方法，比如在主进程脚本中加入 debugger; 语句，然后使用 Node.js 调试工具连接。不过，对于这个简单示例，主要关注渲染进程调试即可。
打包你的 Electron 应用
npm start 命令只是在开发模式下运行你的应用。要将你的应用分发给其他用户，你需要将其打包成可安装的应用程序文件（如 Windows 的 .exe、macOS 的 .dmg 或 .app、Linux 的 .deb 或 .AppImage 等）。
有几个流行的工具可以用来打包 Electron 应用，其中 electron-builder 是功能最强大且最常用的之一。
使用 electron-builder 打包
-
安装 electron-builder：
bash
npm install electron-builder --save-dev -
配置
package.json：
在package.json中添加build字段来配置electron-builder。同时，为了让 builder 知道你的应用入口文件，通常会将main字段设置在应用的顶层（我们已经做到了）。并且添加一个打包脚本。json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron .",
"dist": "electron-builder" <-- 添加打包脚本
},
"keywords": [
"electron"
],
"author": "Your Name",
"license": "MIT",
"devDependencies": {
"electron": "^28.0.0",
"electron-builder": "^24.9.1" <-- 你安装的 electron-builder 版本
},
"build": { <-- electron-builder 配置
"appId": "com.yourcompany.electronquickstart", <-- 你的应用唯一标识
"productName": "MyElectronApp", <-- 应用名称，用于安装包和程序名
"directories": {
"output": "dist" <-- 打包输出目录
},
"files": [ <-- 打包包含的文件
"**/*", <-- 包含所有文件
"!node_modules/${os}/**/*", <-- 排除特定平台的 node_modules 原生模块
"node_modules/**/*" <-- 包含所有 node_modules
],
"mac": { <-- macOS 特定配置
"category": "public.app-category.developer-tools"
},
"win": { <-- Windows 特定配置
"target": [ "nsis" ] <-- 打包为 NSIS 安装程序
},
"linux": { <-- Linux 特定配置
"target": [ "AppImage" ] <-- 打包为 AppImage
}
}
}注意：
appId是一个重要的唯一标识符，请务必修改为你的公司或个人域名的反向写法加上应用名，例如com.mycompany.mygreatapp。 -
运行打包命令：
在终端中运行打包脚本。
electron-builder会自动检测你当前的操作系统，并构建相应的安装包。bash
npm run dist或者针对特定平台：
“`bash
打包 Windows 版本
npm run dist –win
打包 macOS 版本
npm run dist –mac
打包 Linux 版本
npm run dist –linux
“`打包过程可能需要一些时间，因为它需要下载 Electron 针对目标平台的预编译二进制文件，并将你的代码和依赖项与 Electron 运行时打包在一起。
打包成功后，你会在项目根目录下看到一个
dist目录（或你在build.directories.output中指定的目录），其中包含了生成的可安装文件。
进阶方向与考虑事项
恭喜你迈出了 Electron 开发的第一步！但这仅仅是开始。在构建更复杂、更健壮的 Electron 应用时，你可能需要考虑以下进阶主题：
- 使用现代前端框架： 将 Electron 与 React、Vue 或 Angular 等现代前端框架结合，可以更高效地构建复杂的用户界面。通常，你可以使用这些框架的 CLI 工具构建你的前端代码，然后让 Electron 加载构建后的静态文件。
- 更复杂的 IPC 通信： 在主进程和渲染进程之间传递更复杂的数据结构，处理同步 IPC（虽然不推荐，但在少数场景下可能有用），或者实现更精细的消息分发机制。
- 访问更多原生 API： 探索 Electron 提供的其他模块，如
dialog(文件对话框、消息框)、menu(应用菜单、上下文菜单)、notification(桌面通知)、clipboard(剪贴板)、shell(打开外部链接、文件)、powerMonitor(监听电源状态) 等。 - 处理应用更新： 为你的应用实现自动更新功能，这可以通过
electron-updater等库来实现。 - 安全性： 仔细阅读 Electron 的安全文档。除了
contextIsolation和preload脚本，还需要注意内容安全策略 (CSP)、沙箱、处理外部内容、验证输入的有效性等。 - 性能优化： 尽管 Chromium 性能强大，但桌面应用的资源消耗（CPU、内存）仍然是需要关注的问题。优化你的 Web 代码、合理设计主进程和渲染进程的职责、避免在渲染进程中进行大量计算或阻塞 UI 的操作。
- 测试： 为你的 Electron 应用编写单元测试、集成测试和端到端测试。
- 原生模块： 有时你可能需要使用特定的原生功能，而 Electron 或 Node.js 的内置模块无法满足。你可以编写或使用 C++/Rust 等语言编写原生 Node.js 模块，并在 Electron 主进程或预加载脚本中使用它们。
结论
Electron 为前端开发者打开了通向桌面应用开发的大门。通过利用你已经掌握的 HTML、CSS 和 JavaScript 技能，你可以构建出功能丰富、外观精美的跨平台桌面应用程序。从理解主进程与渲染进程的分离及其 IPC 通信机制，到掌握安全的预加载脚本的使用，再到最终的应用打包，Electron 提供了一整套工具和工作流程来简化这一过程。
当然，任何技术都有其权衡。Electron 应用通常相比原生应用体积更大（因为它包含了整个 Chromium 和 Node.js 运行时）且内存消耗可能更高。但对于许多应用场景，尤其是在开发效率、跨平台一致性和利用现有技术栈方面，Electron 的优势是无可比拟的。
希望本文能帮助你对 Electron 有一个清晰的认识，并通过快速上手示例，激发你使用前端技术探索桌面应用开发世界的兴趣。现在，就去构建你的下一个伟大的桌面应用吧！