如果你是一名前端工程师是不是总羡慕桌面开发能做出独立客户端、摆脱浏览器限制想开发一款工具类客户端、桌面小程序、办公软件却又不想从零学习 C、Swift、Win32 等复杂的桌面开发技术今天给大家拆解GitHub 顶级开源项目 electron/electron—— 一款彻底颠覆桌面开发生态的框架。它让只用 HTML、CSS、JavaScript 就能开发跨 Windows、macOS、Linux 三大系统的原生桌面应用如今 VS Code、Postman、Notion、ChatGPT 桌面端等上亿用户的主流软件全都是基于它打造而成。本文从项目背景、核心原理、环境搭建、代码实战、打包上线、避坑指南全维度讲解零基础前端也能跟着做出第一款桌面应用建议收藏反复练习一、认识 ElectronGitHub 出品前端开发者的「桌面开发神器」1.1 项目基础信息项目地址https://github.com/electron/electron Electron 原名 Atom Shell由GitHub 团队开源并长期维护诞生初衷是为了开发 GitHub 自家的 Atom 代码编辑器如今已成为全球跨平台桌面应用的事实标准框架。它基于宽松的MIT 开源协议个人项目、商业产品均可免费使用无版权顾虑这也是各大互联网公司纷纷选择它的核心原因之一。1.2 核心本质一句话读懂 Electron很多人疑惑前端代码怎么能变成桌面软件 公式总结Electron Chromium 浏览器内核 Node.js 系统原生 APIChromium负责渲染页面也就是我们熟悉的 HTML/CSS/JS 界面完美兼容现代前端语法Node.js赋予前端代码操作系统底层能力可直接读写本地文件、调用网络、操作目录原生系统 API封装了窗口、托盘、系统通知、右键菜单、弹窗等桌面应用专属功能。简单理解Electron 相当于给网页套上了一层桌面应用外壳同时打通了浏览器和本地系统的壁垒让前端代码拥有原生桌面软件的能力。1.3 哪些明星产品在用 Electron看完你就知道它有多强大Electron 并非小众玩具而是工业级成熟框架日常你高频使用的软件大多基于它开发开发工具类VS Code全球第一代码编辑器、GitHub Desktop、Postman、Atom办公协作类Notion、Slack、Microsoft Teams、飞书部分桌面组件热门应用类ChatGPT 桌面端、Discord、Spotify 音乐客户端、Figma 桌面版小众工具各类截图工具、本地笔记软件、离线爬虫工具、内部办公系统等。可以说只要是偏轻量化、界面复杂、迭代快的桌面应用优先选择 Electron。1.4 Electron 核心优势对比传统桌面开发技术栈零门槛前端开发者无需学习新语言Vue/React/Angular 等主流框架可直接无缝接入原有前端技术栈全部复用。真正一套代码跨三端编写一次代码即可打包出 Windowsexe、macOSdmg/app、Linuxdeb/rpm安装包省去多端适配成本。生态超级丰富完全兼容 npm 百万级第三方包文件处理、网络请求、数据解析等需求直接调用现成工具。开发效率碾压传统桌面网页热更新、实时调试、界面快速迭代相比 C/Qt 开发开发周期至少缩短 50% 以上。原生能力拉满支持系统托盘、全局快捷键、桌面通知、文件拖拽、自动更新等原生桌面功能媲美原生软件。二、核心架构拆解双进程模型入门必懂避免后续踩坑Electron 最核心的设计是主进程 渲染进程双进程架构这也是它和普通网页最大的区别理解这部分你就搞定了一半原理。2.1 主进程Main Process入口文件项目根目录main.js整个应用的入口和总指挥运行环境完整 Node.js 环境拥有最高权限核心职责管理应用生命周期、创建和关闭窗口、调用系统原生 API、管理菜单/托盘/全局快捷键数量一个 Electron 应用只有一个主进程。2.2 渲染进程Renderer Process载体每一个应用窗口对应一个独立渲染进程类似浏览器的标签页运行环境默认是浏览器环境可按需配置负责展示 HTML 页面、执行前端交互逻辑核心职责页面渲染、用户交互、前端框架逻辑数量多窗口应用会存在多个渲染进程进程之间相互隔离提升稳定性。2.3 进程通信IPC渲染进程页面无法直接调用系统底层 API必须通过IPC进程间通信向主进程发送请求由主进程执行操作后再返回结果。 同时 Electron 提供contextBridge安全桥接方案杜绝直接暴露 Node API 带来的安全风险这也是官方强制推荐的写法。三、从零实战5 分钟搭建第一个 Electron 桌面应用代码可直接复制前置准备安装Node.jsLTS 长期支持版必备建议 16 版本配置好 npm 环境任意代码编辑器VS Code 最佳终端工具Windows CMD/PowerShell、Mac/Linux 终端。步骤 1初始化项目 安装依赖依次执行以下终端命令全程无复杂配置# 1. 创建项目文件夹并进入 mkdir my-first-electron cd my-first-electron # 2. 初始化 package.json默认配置 npm init -y # 3. 安装 Electron 开发依赖 npm install electron --save-dev步骤 2编写核心文件共 3 个基础文件在项目根目录新建 3 个文件完整目录结构如下my-first-electron/ ├── package.json # 项目配置、启动脚本 ├── main.js # 主进程入口核心 ├── preload.js # 预加载脚本安全桥接 └── index.html # 渲染页面前端界面1配置 package.json修改scripts启动命令并指定主进程入口{ name: my-first-electron, version: 1.0.0, main: main.js, // 指定主进程入口文件必填 scripts: { start: electron .// 启动命令npm start }, devDependencies: { electron: ^最新版本号 } }2主进程 main.js核心代码负责创建窗口、管理应用生命周期代码附带详细注释// 引入 Electron 核心模块 const { app, BrowserWindow } require(electron) const path require(path) // 定义创建窗口的函数 function createWindow () { // 实例化桌面窗口配置窗口属性 const mainWindow new BrowserWindow({ width: 800, // 窗口宽度 height: 600, // 窗口高度 title: 我的第一个Electron桌面应用, // 预加载脚本配置安全必备 webPreferences: { preload: path.join(__dirname, preload.js), contextIsolation: true, // 开启上下文隔离安全规范 nodeIntegration: false// 关闭Node集成防止安全漏洞 } }) // 加载本地 HTML 页面渲染进程 mainWindow.loadFile(index.html) // 开发环境自动打开调试控制台上线可注释 mainWindow.webContents.openDevTools() } // 应用准备就绪后创建窗口 app.whenReady().then(createWindow) // 所有窗口关闭时退出应用兼容 Windows/Linux app.on(window-all-closed, () { // macOS 特殊逻辑窗口关闭后应用不退出遵循系统习惯 if (process.platform ! darwin) app.quit() }) // macOS 激活应用时若无窗口则重新创建 app.on(activate, () { if (BrowserWindow.getAllWindows().length 0) createWindow() })3预加载脚本 preload.js安全通信使用contextBridge安全地将主进程能力暴露给渲染进程是官方标准写法const { contextBridge } require(electron) // 向页面暴露全局变量获取当前操作系统 contextBridge.exposeInMainWorld(electronAPI, { platform: process.platform })4页面文件 index.html前端界面普通 HTML 即可和网页开发完全一致!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleElectron 演示页面/title style body { text-align: center; margin-top: 100px; font-size: 18px; } /style /head body h1 恭喜Electron 应用启动成功/h1 p当前操作系统span idplatform/span/p script // 调用预加载暴露的 API document.getElementById(platform).innerText window.electronAPI.platform /script /body /html步骤 3启动应用终端执行启动命令npm start几秒后你就能看到一个独立的桌面窗口页面正常展示操作系统信息第一款 Electron 桌面应用制作完成四、项目打包把代码变成可安装的桌面软件写完代码后我们需要将项目打包为.exeWindows、.dmgMac等安装包推荐业界主流打包工具electron-builder。4.1 安装打包工具npm install electron-builder --save-dev4.2 配置打包脚本修改package.json新增打包命令和打包配置scripts: { start: electron ., package-win: electron-builder --win, // 打包Windows安装包 package-mac: electron-builder --mac, // 打包Mac安装包 package-linux: electron-builder --linux// 打包Linux安装包 }, build: { appId: com.demo.electron, // 应用唯一标识 productName: 我的桌面工具, // 应用名称 win: { target: nsis// Windows 安装包格式 }, mac: { target: dmg// Mac 安装包格式 } }4.3 执行打包# 打包 Windows 版本 npm run package-win打包完成后项目根目录会生成dist文件夹里面就是可直接分发、安装的桌面软件安装包。小贴士跨系统打包存在限制Windows 系统只能打包 Windows 安装包Mac 系统可打包 Mac/Windows 包。五、进阶方向 最佳实践避坑优化生产环境必备5.1 技术栈搭配主流组合原生 HTML/CSS/JS简单工具、轻量客户端首选体积小、启动快Vue Electron国内最主流组合上手简单、生态完善适合管理系统、桌面工具React Electron适合复杂交互、大型桌面应用VS Code 便是基于 React ElectronTypeScript Electron中大型项目强制推荐提升代码可维护性减少线上 bug。5.2 安全加固重中之重Electron 早期因安全问题饱受诟病官方现已明确规范生产环境必须遵守关闭nodeIntegration禁止渲染进程直接使用 Node API开启contextIsolation上下文隔离所有进程通信统一使用contextBridge不暴露敏感 API配置 CSP 内容安全策略禁止恶意脚本执行。5.3 性能优化解决 Electron 「体积大、启动慢」痛点懒加载非核心模块减少启动加载资源CPU 密集型任务使用 Web Workers避免页面卡顿启用硬件加速优化动画和页面渲染打包时使用压缩插件精简安装包体积。5.4 常见拓展功能工作高频需求系统托盘、全局快捷键桌面消息通知、弹窗对话框本地文件读写、拖拽上传应用自动更新、版本检测自定义无边框窗口、窗口拖拽。六、总结 学习路线6.1 为什么前端一定要学 Electron拓宽职业边界从「网页开发」升级为「全栈桌面前端」提升职场竞争力低成本落地产品个人开发者、小团队无需多端开发快速制作独立桌面工具变现就业加分项中大型互联网公司、工具类软件团队Electron 已是刚需技能。6.2 新手学习路线由浅入深掌握主进程、渲染进程、IPC 通信三大核心概念复刻简易 Demo记事本、计算器、本地阅读器结合 Vue/React 开发完整功能应用学习打包、签名、自动更新、安全优化等生产级能力参考 GitHub 开源 Electron 项目如 electron/electron 官方示例研读源码。6.3 资源推荐官方仓库https://github.com/electron/electron源码、版本更新、Issue 答疑官方文档https://www.electronjs.org/zh/docs最全 API 文档权威参考