跳转到主要内容

先决条件

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

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

目标

本教程首先引导您从零开始组装一个最小化的 Electron 应用程序,然后教您如何使用 Electron Forge 对其进行打包并分发给用户。

如果您希望通过单一命令的模板开始一个项目,我们建议您从 Electron Forge 的 create-electron-app 命令开始。

假设

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

所需工具

代码编辑器

您将需要一个文本编辑器来编写代码。我们推荐使用 Visual Studio Code,但您可以选择任何您喜欢的编辑器。

命令行

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

  • Windows:命令提示符或 PowerShell
  • macOS:终端
  • Linux:因发行版而异(例如 GNOME 终端、Konsole)

大多数代码编辑器也带有集成终端,您也可以使用它。

Git 和 GitHub

Git 是一个常用的源代码版本控制系统,GitHub 是构建在其之上的协作开发平台。虽然两者都不是构建 Electron 应用程序所必需的,但我们将在教程后面使用 GitHub Releases 来设置自动更新。因此,我们将要求您:

如果您不熟悉 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 是否已正确安装,您可以在运行 nodenpm 命令时使用 -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