Electron介绍

Electron 是由名叫Cheng Zhao的GitHub 工程师创建的一个开源项目，之前这个项目被称为 Atom Shell，Atom是GitHub使用Web技术创建的一个跨平台文本编辑器，而Electron则是Atom的基石。

Electron 是一个使用 JavaScript、HTML 和 CSS 等 Web 技术，来构建跨平台桌面应用程序的开源框架。它的核心理念是让 Web 开发者能用熟悉的前端技术栈，去开发像 Visual Studio Code、Slack、Discord、ChatGPT 桌面版这样的专业级桌面应用。

官网

<a href=“https://www.electronjs.org” target=“_blank”>https://www.electronjs.org</a>

核心架构：为何如此强大？

Electron 的强大源于它将两个业界顶尖的技术深度整合到一个运行时中：

1. Chromium 渲染引擎：负责渲染和呈现 Web 界面，这意味着所有现代 Web 标准（如 HTML5、CSS3、ES6+，DOM，Web API）在 Electron 中都能直接使用。
2. Node.js 后端运行时：访问文件系统、进程、网络、操作系统底层 API，CommonJS模块系统。

Electron 把两者打通：前端JavaScript可以直接调用 Node API，实现网页做不到的本地操作。

核心架构：主进程 + 渲染进程

为了保证应用的稳定性与安全性，Electron 借鉴了 Chrome 浏览器的多进程架构，主要分为两种进程：

1. 主进程 (Main Process)：

• 入口文件，即应用的唯一入口点，整个应用只有一个主进程（即package.json的main脚本的进程）
• 基于 Node.js 运行，拥有完整系统权限；
• 职责：负责创建和管理窗口（BrowserWindow 实例）、控制应用生命周期，系统菜单、托盘、文件读写、全局快捷键、进程通信，并处理与操作系统的原生交互。它是整个应用的"大脑"。
• API：app、BrowserWindow、Menu、Tray、dialog 等。

2. 渲染进程 (Renderer Process)

• 每个窗口（BrowserWindow）都对应一个独立的渲染进程，相当于浏览器标签页。
• 它负责渲染 HTML 页面和处理用户界面交互。出于安全考虑，默认沙盒隔离，渲染进程默认无法直接访问系统文件（Node.js API）。
• 可引入 Vue/React/Svelte 等前端框架写界面。
• 如需调用系统功能，必须通过预加载脚本 (Preload Script) 或 进程间通信 (IPC) 向主进程请求。

3. 进程间通信 (IPC)（核心机制）

• 进程间不能直接互访，主进程和渲染进程通过 ipcMain 和 ipcRenderer 模块进行异步消息传递（事件通信），实现功能调用和数据返回。
• ipcMain：主进程监听 / 发送消息
• ipcRenderer：渲染进程收发消息

预加载脚本：在网页加载前执行，拥有部分 Node.js 权限。它通过 contextBridge 模块，安全地将一些精选的 API 暴露给渲染进程使用。

关键能力（网页不具备的桌面特性）

1. 本地文件操作：读写硬盘、文件夹、本地数据库；
2. 系统原生交互：弹窗、文件选择框、右键菜单、系统托盘、通知；
3. 全局快捷键：软件后台运行时全局热键；
4. 多窗口管理：创建无边框窗口、置顶窗口、子窗口；
5. 打包分发：编译成 .exe(Windows)、.dmg(macOS)、.deb/.rpm(Linux)；
6. 原生功能扩展：调用 C++ 原生插件、串口、硬件设备；
7. 自动更新：内置应用升级更新模块。

主流工具链

1. 项目初始化

• electron：框架本体
• electron-builder：最常用打包工具，一键生成各平台安装包
• electron-packager：轻量打包，仅输出程序目录

2. 前端框架配套模板

• Vue：electron-vite、Vue CLI Electron 插件
• React：Vite + Electron、Create React App Electron
• TS：原生支持 TypeScript，类型完善

3. 开发辅助

• electron-devtools-installer：安装 Vue/React DevTools
• electron-reloader：代码热更新，修改自动重启窗口

优缺点

优点

1. 学习成本低，开发效率高，前端工程师无需学习 C++/Qt/Flutter 即可开发桌面；
2. 跨平台一套代码，维护成本低；
3. 界面开发灵活，CSS 自由定制，轻松实现复杂UI、无边框、毛玻璃；
4. 生态强大，npm 百万包可直接复用；
5. 调试简单，和 Chrome 调试网页完全一致。
6. 成熟稳定，全球大量知名企业和旗舰级产品采用。拥有一个由 Microsoft、Slack 等公司共同维护的活跃社区

缺点

1. 应用体积较大：由于每个应用都打包了完整的 Chromium 和 Node.js，安装包通常大于 100MB；
2. 内存占用偏高：每个窗口独立进程，低配电脑容易卡顿；
3. 性能弱于原生客户端：复杂图形、大量文件操作不如 Qt、Flutter；
4. 综上，相比原生应用，资源消耗更高。故对于需要极致性能或资源受限的场景，需要仔细设计和优化。

知名 Electron 开发软件

• VS Code（微软代码编辑器）
• Discord（聊天软件）
• Slack（企业协作）
• Figma 桌面客户端
• GitHub Desktop
• Postman、MongoDB Compass、新版 QQ NT

总结

总的来说，Electron 是一个非常成熟的框架，它极大地降低了桌面应用开发的门槛，让 Web 开发的力量得以在桌面端发挥。如果你是一个 Web 开发者，希望创建一款跨平台应用，或者团队希望快速交付桌面产品，Electron 是一个非常值得考虑的首选方案。