先决条件

跟随教程

这是 Electron 教程的第 1 部分。

1. 先决条件
2. 构建你的第一个应用
3. 使用预加载脚本
4. 添加功能
5. 打包你的应用
6. 发布和更新

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。通过将 Chromium 和 Node.js 嵌入到单个二进制文件中，Electron 允许你使用单个 JavaScript 代码库创建可在 Windows、macOS 和 Linux 上运行的跨平台应用程序。

本教程将指导你完成使用 Electron 开发桌面应用程序并将其分发给最终用户的过程。

目标

本教程首先指导你完成从头开始构建一个最小的 Electron 应用程序的过程，然后教你如何使用 Electron Forge 打包并将其分发给用户。

如果你希望使用单个命令的样板代码来启动项目，我们建议你使用 Electron Forge 的 create-electron-app 命令。

假设

Electron 是 Web 应用程序的原生包装层，并在 Node.js 环境中运行。因此，本教程假设你通常熟悉 Node 和前端 Web 开发的基础知识。如果你需要在继续之前进行一些背景阅读，我们推荐以下资源

• Web 入门 (MDN Web 文档)
• Node.js 简介

所需工具

代码编辑器

你需要一个文本编辑器来编写代码。我们建议使用 Visual Studio Code，但你可以选择你喜欢的任何一个。

命令行

在整个教程中，我们将要求你使用各种命令行界面 (CLI)。你可以在系统的默认终端中键入这些命令

• Windows：命令提示符或 PowerShell
• macOS：终端
• Linux：根据发行版而异（例如 GNOME 终端、Konsole）

大多数代码编辑器还附带一个集成终端，你也可以使用它。

Git 和 GitHub

Git 是一个常用的源代码版本控制系统，GitHub 是一个基于 Git 构建的协作开发平台。虽然两者对于构建 Electron 应用程序都不是严格必需的，但我们将在本教程的后面使用 GitHub 发行版来设置自动更新。因此，我们将要求你

• 创建一个 GitHub 帐户
• 安装 Git

如果你不熟悉 Git 的工作原理，我们建议阅读 GitHub 的 Git 指南。如果你更喜欢使用可视化界面而不是命令行，也可以使用 GitHub Desktop 应用程序。

我们建议你在开始本教程之前创建一个本地 Git 存储库并将其发布到 GitHub，并在每个步骤之后提交你的代码。

通过 GitHub Desktop 安装 Git

如果你尚未安装 Git，GitHub Desktop 将在你的系统上安装最新版本的 Git。

Node.js 和 npm

要开始开发 Electron 应用程序，你需要将 Node.js 运行时及其捆绑的 npm 包管理器安装到你的系统上。我们建议你使用最新的长期支持 (LTS) 版本。

提示

请使用针对你的平台的预构建安装程序安装 Node.js。否则，你可能会遇到与不同开发工具的不兼容问题。如果你使用的是 macOS，我们建议使用像 Homebrew 或 nvm 这样的包管理器，以避免任何目录权限问题。

要检查 Node.js 是否已正确安装，你可以在运行 node 和 npm 命令时使用 -v 标志。这些应该会打印出已安装的版本。

$ node -v
v16.14.2
$ npm -v
8.7.0

注意

虽然你需要在本地安装 Node.js 来搭建 Electron 项目，但 Electron **不会使用你的系统 Node.js 安装来运行其代码**。相反，它自带了自己的 Node.js 运行时。这意味着你的最终用户不需要自己安装 Node.js 作为运行你的应用程序的先决条件。

要检查你的应用程序中正在运行哪个版本的 Node.js，你可以在主进程或预加载脚本中访问全局 process.versions 变量。你也可以参考 https://releases.electronjs.org/releases.json。