人人都会AI编程

2.1 环境搭建：Node.js 环境配置、跨平台开发环境准备

更新时间：2026-07-11

在正式动手之前，我们需要先把开发环境准备好。Electron 的开发环境本质上就是一个强化版的 Node.js 环境，所以第一步就是确保你的机器上能正常运行 Node.js 和 npm。

2.1.1 安装 Node.js

Electron 本身依赖 Node.js 作为运行时，因此你需要安装一个稳定版本的 Node.js。推荐使用 LTS（长期支持版），它更稳定，社区配套也更成熟。

安装方式一：官网下载（适合新手）
访问 Node.js 官方网站（nodejs.org），首页会自动推荐适合你操作系统的 LTS 版本。下载安装包后双击运行，一路默认选项即可。安装完成后，打开终端（Windows 用户推荐使用 PowerShell 或 CMD），输入以下命令验证：

node -v
npm -v

如果看到类似 v20.11.0 和 10.2.4 的版本号，说明安装成功。

安装方式二：使用 nvm 管理多个版本（强烈推荐）
在真实项目中，你可能需要同时维护多个项目，而不同项目对 Node.js 的版本要求可能不同。nvm（Node Version Manager）可以让你轻松在多个 Node 版本之间切换。

安装命令：

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

安装完成后重启终端，然后安装并使用 LTS 版本：

  nvm install --lts
  nvm use --lts

下载安装包并运行，然后同样执行 nvm install lts 和 nvm use lts。

无论采用哪种方式，保证 Node.js 版本 ≥ 16（Electron 25 及以上要求 Node 16+，使用当前最新 LTS 即可）。

2.1.2 配置 npm 镜像（可选但实用）

在国内开发时，安装 npm 包可能会遇到网络问题。将 npm 镜像设置为淘宝源或国内镜像站能大幅提升速度：

npm config set registry https://registry.npmmirror.com

如果之后想恢复默认：

npm config delete registry

你还可以安装 nrm（npm registry manager）来便捷切换镜像：

npm install -g nrm
nrm test   # 测速
nrm use taobao

2.1.3 跨平台开发环境准备

Electron 本身支持在 Windows、macOS 和 Linux 上开发和构建，但不同平台对开发者的要求不同。你需要根据自己的主力开发系统做好相应准备。

对于 macOS 开发者

  • 系统要求：macOS 10.13 (High Sierra) 及以上。
  • Xcode Command Line Tools：构建 native 模块或调试时需要。在终端执行：
  xcode-select --install
  • 如果需要在 macOS 上打包 Windows 版本：可以借助 electron-builder 的远程构建或使用虚拟机，但最简单的做法是在 CI/CD 流程中完成跨平台构建（后续章节会介绍）。

对于 Windows 开发者

  • 系统要求：Windows 10 及以上，建议 64 位。
  • 构建工具：有些 npm 包包含 C++ 代码，需要编译。安装 windows-build-tools（早期版本）或更现代的 Visual Studio Build Tools：
  npm install --global windows-build-tools

或者直接安装 Visual Studio Build Tools，勾选“使用 C++ 的桌面开发”工作负载。

  • 在 Windows 上开发 macOS 版：通常无法直接在本机打包，需依赖 CI（如 GitHub Actions 的 macOS 运行器）。

对于 Linux 开发者

  • 系统要求：Ubuntu 20.04+、Fedora 34+ 等主流发行版。
  • 依赖：需要一些系统库以支持 Chromium 和 Electron 的构建与运行。以 Ubuntu/Debian 为例：
  sudo apt update
  sudo apt install libx11-xcb1 libxcomposite1 libxcursor1 libxdamage1 \
  libxi6 libxtst6 libnss3 libcups2 libxss1 libxrandr2 \
  libasound2 libatk1.0-0 libgtk-3-0 libgbm-dev

一般通过 apt 安装的 Node.js 和这些基础库通常已足够，但若遇到缺失提示，按错误补充即可。

  • 在 Linux 上打包其他平台：同样建议通过 CI 处理。

2.1.4 验证环境是否就绪

为了确保 Electron 能够正常运行，可以快速创建一个小项目来验证：

# 新建一个文件夹
mkdir electron-test
cd electron-test

# 初始化项目
npm init -y

# 安装最新稳定版 Electron（作为开发依赖）
npm install electron --save-dev

然后在 package.json 中添加启动脚本：

"scripts": {
  "start": "electron ."
}

在项目根目录下创建 main.js：

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

再创建 index.html：

<!DOCTYPE html>
<html>
  <body>
    <h1>Electron 环境搭建成功！</h1>
  </body>
</html>

最后运行：

npm start

如果弹出一个窗口，显示标题文字，那么你的开发环境就已经完全就绪了。如果遇到错误，通常是因为 Electron 下载失败或系统依赖缺失。Electron 的安装脚本会自动从 GitHub 下载对应平台的预编译二进制文件，国内网络可能需要设置代理或使用镜像：

# 设置 Electron 镜像（可选）
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

或者直接通过环境变量临时指定：

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

2.1.5 开发工具推荐

一个好的编辑器能极大提升 Electron 开发体验。主流选择是 Visual Studio Code，它本身就是用 Electron 构建的，对 Electron 开发有天然的亲和力。建议安装以下扩展：

  • ESLint：代码质量和风格统一。
  • Prettier：自动格式化代码。
  • Debugger for Chrome：或直接用 VS Code 内置的调试器，可以附加到 Electron 渲染进程。

环境搭建是开发的基石。确保 Node.js 正常运行、Electron 能启动一个空窗口之后，我们就可以进入下一步 —— 实际构建应用的骨架。