Electron 完全指南：从入门到发布桌面应用

        在 Web 技术统治了浏览器的今天，我们该如何快速地去构建一个真正的桌面应用程序？答案就是 Electron ，该框架使你可以使用前端技术栈开发跨平台的桌面应用——Visual Studio Code、Figma、Slack、Discord、Notion、GitHub Desktop 等众多知名应用都基于 Electron 构建。本文将带你从零开始，掌握 Electron 的核心概念，并最终打包出一个可运行、可分发的桌面应用。

---

一、什么是 Electron？

Electron 是由 GitHub 开发并开源的框架，它结合了Chromium（用于渲染界面）和Node.js（用于访问操作系统底层能力），让你能够用 JavaScript 构建 Windows、macOS 和 Linux 上的桌面应用。

+-------------------------------------------------+ | Electron App | +-------------------------------------------------+ | Main Process (Node.js) | | - 管理窗口生命周期 | | - 访问文件系统、原生菜单、系统托盘 | | - 创建和控制渲染进程 | +-------------------------------------------------+ | Renderer Process (Chromium) | | - 显示 UI (HTML/CSS/JS) | | - 可以使用大部分 Web API | | - 如果需要访问 Node 能力，需通过 IPC 通信 | +-------------------------------------------------+

Electron 的核心模型是主进程和渲染进程：

• 主进程：应用入口（main.js），运行在 Node.js 环境，负责创建窗口、管理应用生命周期、处理原生资源（菜单、托盘等）。一个应用只有一个主进程。
• 渲染进程：每个窗口独立的 Web 页面，运行 Chromium 内核，负责 UI 交互。默认情况下，渲染进程不能直接访问 Node.js API，但可以通过预加载脚本（preload）安全地暴露必要的功能。

这种隔离设计，既保证了安全性（防止恶意网页访问本地文件），又保留了灵活性（通过 IPC 让二者通信）。

---

二、环境准备与快速开始

2.1 安装 Node.js

Electron 依赖 Node.js 环境。请从 nodejs.org 下载 LTS 版本安装。安装完成后在终端验证：

node -v # 应显示 v18.x 或更高 npm -v

2.2 创建项目并安装 Electron

mkdir my-electron-app cd my-electron-app npm init -y npm install --save-dev electron

2.3 配置启动脚本

在package.json中添加main字段（指定入口文件）和start命令：

{ "name": "my-electron-app", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron ." }, "devDependencies": { "electron": "^30.0.0" } }

2.4 创建主进程文件main.js

const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 80