Electron 开发环境搭建

最近在尝试使用 Electron 开发桌面端应用。

搭建 Electron 开发环境主要分为两步：先安装 Node.js，再通过脚手架工具创建一个项目模板。

1. 安装前置环境：Node.js

Electron 本身是一个 Node.js 模块，所以必须先安装 Node.js。

• 下载安装：访问 Node.js 官网下载 LTS（长期支持）版本 的安装包并安装。对于 Windows 用户，也可以使用 winget install OpenJS.NodeJS 命令来安装。

• 验证：安装完成后，打开终端（命令行），输入以下命令，能显示出版本号即表示成功。

  node -v
  npm -v

注意：Electron 虽然由 Node.js 驱动，但它会打包自己的 Node.js 运行时。这意味着你的最终用户不需要提前安装 Node.js 就能运行你的应用。

2. 创建项目：使用 Electron Forge 脚手架

手动配置 Electron 项目比较繁琐，推荐使用官方维护的脚手架工具 Electron Forge，它能一键生成包含打包工具的基础项目。

在终端中运行以下命令来创建项目（my-app 是你的项目名称，可自定义）：

npm create electron-app@latest my-app

运行后，它会交互式地询问你几个配置选项，按推荐选择即可：

1. Bundler（打包器）：建议选 None。这样在集成原生模块时无需额外配置。
2. Language（语言）：选 JavaScript（如果你熟悉 TypeScript 也可以选它）。
3. Electron Version：选 Latest（最新版）。
4. Initialize git：按需选择。

3. 运行与开发

进入项目目录并启动应用：

cd my-app
npm start

如果一切顺利，你会看到一个默认的 Electron 窗口弹出，这说明开发环境已经就绪。

4. 网络优化（国内环境）

如果在安装依赖或首次启动（下载 Electron 二进制包）时速度很慢或失败，可以配置国内镜像源。在项目根目录的 .npmrc 文件中添加以下内容：

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

5. 基础项目结构

脚手架生成的项目通常包含以下核心文件，了解它们有助于你开始开发：

• package.json：项目配置，包含 main 入口（通常是 main.js）和 start 脚本。
• main.js：主进程文件。它管理应用的生命周期、创建窗口，并运行在完整的 Node.js 环境中。
• index.html：渲染进程的入口页面。所有界面相关的 HTML/CSS/JS 都从这里开始，它本质上是一个浏览器窗口。
• preload.js（可选）：用于在渲染进程和主进程之间安全地暴露 API。