字节笔记本
2026年2月22日
Electron 应用开发实践指南 - 开篇：Electron 带来的边界扩展
前端工程师这一角色随着互联网的发展而逐渐形成。起初，网站开发主要关注基本的 HTML（超文本标记语言）、CSS（层叠样式表）和一些简单的 JavaScript 交互。1990 年代中期，随着互联网的普及，网站不再只是展示信息，而是开始变得更加动态和交互式。
在这个过程中，前端工程师的概念逐渐确立。他们开始负责网站的用户界面（UI）和用户体验（UX），包括页面设计、交互设计、响应式设计等。随着技术的不断演进，前端工程师的职责也扩展到了更复杂的前端开发，涉及各种框架（如 React、Angular、Vue.js 等）和库，以及移动端开发和跨平台兼容性等领域。
在当今时代，随着智能化和 AI 技术的兴起，一些简单的交互界面可以通过无代码的方式直接生成，前端的部分职责开始被逐步取代。据我所知，现在的一些互联网大厂开始取消"前端工程师"这一岗位，取而代之的是"端工程师"。这一改变也意味着前端的职能边界开始逐步扩展和延伸。
所以，作为"端工程师"中的一员，如果你想要尝试着扩大自己的技能边界，掌握一门桌面端应用开发的能力，那么 Electron 将是一个非常不错的选择。
为什么不是 Tauri、NW.js、Flutter？
既然要掌握一门桌面端应用开发的能力，那么为什么不选择 Tauri、NW.js、Flutter，而是 Electron 呢？其实它们各有千秋，这里我们先只关注比较流行的一些桌面端开发框架，并进行一些拓展对比：
| 框架 | 开发技术 | 生态系统 | 适用场景 | 安全性 | 安装包体积 |
|---|---|---|---|---|---|
| Electron | HTML、CSS、JavaScript、Chromium、Node.js | 比较老牌，有强大的社区支持 | 功能丰富、跨平台的桌面应用，特别是网络相关的应用 | 因为使用 Chromium，需要注意安全漏洞。需谨慎处理外部内容。 | 安装包较大，因为集成了 Chromium |
| Tauri | Rust、任何编程语言 | 快速成长的社区，灵活性高 | 需要高性能、小体积的应用，对 Rust 有兴趣的开发者 | 使用 Rust 语言提供更高的安全性，可以减少安全风险。 | 相对较小的安装包，因为可以更精准地控制应用所需的依赖。 |
| NW.js | HTML、CSS、JavaScript | 用户群体相对较小 | 类似的跨平台桌面应用，可能需要更多自行处理配置方面的工作 | 与 Electron 类似，需注意 Chromium 的安全问题。 | 安装包体积较大，因为集成了 Chromium。 |
| Flutter | Dart 语言、自有渲染引擎 | 迅速崛起的生态系统，Google 支持 | 移动应用开发、同时可用于桌面和 Web 应用 | Google 支持和活跃的社区有助于安全性的维护。 | 安装包体积较小，Flutter 的渲染引擎可提供较小的包。 |
总体来看，Electron 有着其强大的跨端能力、社区生态，更重要的是可以直接使用 HTML + JS + CSS 来开发桌面端应用程序，这对前端来说无疑是非常容易上手的，也有着无与伦比的开发效率和平滑的学习曲线。
但是 Electron 也有着天然的短板，比如：Electron 相比其他 Native 来说，包体积和 CPU 资源占用较高；我们还需要额外解决一些安全性问题和性能体验问题。
Electron 相对于 Web 开发的一些优势
通过上面的对比，我们大致了解了 Electron 的一个核心优势是跨平台能力，而其跨平台能力主要依赖于 Chromium + Node.js + 内置 API 来实现的。可能有些小伙伴会有疑问，既然是依托于 Chromium，那么为什么不直接使用浏览器开发网页而选择 Electron 开发桌面端呢？
1. 无兼容性问题
由于 Electron 内置了 Chromium 浏览器，所以几乎不需要考虑不同浏览器兼容性问题。
与此同时，这也意味着，我们可以使用一些 ES 6/7/8/9/10 的高级语法，比如：async、await、Promise……而不需要 PolyFill。
2. 最新浏览器 Feature
通常情况下，Electron 会在新的稳定版本发布后相对快速地更新其 Chromium 版本，这也意味着你可以快速体验和使用一些浏览器最新的 Feature。
比如，通过对图片、iframe 设置 loading="lazy" 属性，可以天然支持懒加载：
<img src="image.jpg" alt="..." loading="lazy" />
<iframe src="video-player.html" title="..." loading="lazy"></iframe>3. 轻松绕过跨域问题
在浏览器环境中，作为一个前端开发，经常会碰到各种各样的跨域问题，比如 iframe 跨域、request 请求跨域……而对于请求类跨域问题通常需要后端配合着设置跨域限制。
在 Electron 应用中，由于可以自由地访问本地文件系统和系统资源，也可以通过 Node.js 模块实现对底层操作系统的访问。这种能力使得 Electron 应用可以绕过浏览器的跨域限制，可以在本地环境中自由通信和交互，而无需担心同源策略带来的限制。
4. 使用 Node.js 提供的能力
Node.js 的所有内置模块在 Electron 中都可用，同时第三方 node 模块也完全支持（包括本地 native 模块）。
试想一下，有了这个能力，就可以实现前端开发多年的梦想：直接在浏览器中无限制地使用 Node API！
5. 客户端能力的支持
为了弥补 Node.js 和前端技术访问系统 API 方面的不足，Electron 内部对系统 API 做了封装，比如：
- 客户端 GUI：右键菜单、窗口定制、系统托盘、Dock……
- 桌面环境集成：系统通知、剪切板、系统快捷键、文件拖放……
- 设备 API：电源监视、内存、CPU、屏幕……
开发者基于 Electron 开发应用时，可以直接使用 JavaScript 访问这些 API。
6. 调用 OS 能力
Electron 可以通过 Node.js 的 Child Process 模块执行系统命令，因此可以间接地调用 AppleScript（在 macOS 上）和 Windows RT（在 Windows 上）以及一些 Shell 脚本。
Electron 应用场景的分布
使用 Electron 开发的应用品类非常丰富，根据 Electron 官网 ShowCase 的统计数据：
可以看到，在使用 Electron 开发的 APP 中，开发者工具、效率应用占据了大半江山。
基于此，本小册实战部分的内容将会以 Electron 开发工具、效率类应用为基石，介绍 Electron 开发中的经验、问题、解决方案，并教会你打造一款属于自己的插件化工具箱。
相对于其他 Electron 教程而言，实战部分绝对不是开发一个玩具的 demo 项目然后草草收场，其依托的技术原型就是开源项目 Rubick（6.2k+ star），所有示例代码都在开源项目中应用，因此会有更强的带入感和业务应用性。
题外话：Rubick 是一款插件化桌面端工具箱，Rubick 插件市场提供丰富插件（比如：屏幕取色插件、翻译插件、OCR 插件），用户可以随时随地安装所需要的插件完成工作。Rubick 取名的灵感来自于一款经典的塔防游戏 Dota。他是游戏中的一个英雄，核心技能是可以随心所欲地把其他英雄的技能汲取到（插件化）自己身上进行使用。
总结
这里我们主要介绍了一些桌面端技术现状和一些技术对比，并且简要说明了 Electron 相对于 Web 开发的一些优势和包含的一些能力。
希望通过阅读本章内容，你能对 Electron 框架有一个基本的认识，知道 Electron 框架可以赋予我们什么样的能力、我们可以拿来做哪些事情。这样在遇到特定场景的时候，也许我们会感叹一句：Electron 可以完美解决痛点！
最后，让我们一起携手开启 Electron 开发之旅吧！