Skip to main content

先决条件

按照教程进行操作

这是 Electron 教程的第1部分。

🌐 This is part 1 of the Electron tutorial.

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

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

🌐 Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into a single binary file, Electron allows you to create cross-platform apps that work on Windows, macOS, and Linux with a single JavaScript codebase.

本教程将指导你完成使用 Electron 开发桌面应用并将其分发给终端用户的整个进程。

🌐 This tutorial will guide you through the process of developing a desktop application with Electron and distributing it to end users.

目标​

🌐 Goals

本教程首先引导你从零开始拼装一个最简化的 Electron 应用，然后教你如何使用 Electron Forge 打包并分发给用户。

🌐 This tutorial starts by guiding you through the process of piecing together a minimal Electron application from scratch, then teaches you how to package and distribute it to users using Electron Forge.

如果你希望通过一条命令就能启动一个项目，我们建议你从 Electron Forge 的 create-electron-app 命令开始。

🌐 If you prefer to get a project started with a single-command boilerplate, we recommend you start with Electron Forge's create-electron-app command.

假设​

🌐 Assumptions

Electron 是一个用于网页应用的原生封装层，并在 Node.js 环境中运行。因此，本教程假设你已经大致熟悉 Node 和前端网页开发的基础知识。如果在继续之前你需要做一些背景阅读，我们推荐以下资源：

🌐 Electron is a native wrapper layer for web apps and is run in a Node.js environment. Therefore, this tutorial assumes you are generally familiar with Node and front-end web development basics. If you need to do some background reading before continuing, we recommend the following resources:

所需工具​

🌐 Required tools

代码编辑器​

🌐 Code editor

你需要一个文本编辑器来编写代码。我们推荐使用 Visual Studio 代码，虽然你可以选择任何你喜欢的编辑器。

🌐 You will need a text editor to write your code. We recommend using Visual Studio Code, although you can choose whichever one you prefer.

命令行​

🌐 Command line

在整个教程中，我们会请你使用各种命令行接口（CLI）。你可以将这些命令输入到系统的默认终端中：

🌐 Throughout the tutorial, we will ask you to use various command-line interfaces (CLIs). You can type these commands into your system's default terminal:

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

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

🌐 Most code editors also come with an integrated terminal, which you can also use.

Git 和 GitHub​

🌐 Git and GitHub

Git 是一种常用的源代码版本控制系统，而 GitHub 是建立在其基础上的协作开发平台。尽管在构建 Electron 应用时并非绝对必要，但我们将在本教程的后续部分使用 GitHub 发布来设置自动更新。因此，我们需要你：

🌐 Git is a commonly-used version control system for source code, and GitHub is a collaborative development platform built on top of it. Although neither is strictly necessary to building an Electron application, we will use GitHub releases to set up automatic updates later on in the tutorial. Therefore, we'll require you to:

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

🌐 If you're unfamiliar with how Git works, we recommend reading GitHub's Git guides. You can also use the GitHub Desktop app if you prefer using a visual interface over the command line.

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

🌐 We recommend that you create a local Git repository and publish it to GitHub before starting the tutorial, and commit your code after every step.

通过 GitHub Desktop 安装 Git

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

🌐 GitHub Desktop will install the latest version of Git on your system if you don't already have it installed.

Node.js 和 npm​

🌐 Node.js and npm

要开始开发 Electron 应用，你需要在系统上安装 Node.js 运行时及其打包的 npm 包管理器。我们建议你使用最新的长期支持（LTS）版本。

🌐 To begin developing an Electron app, you need to install the Node.js runtime and its bundled npm package manager onto your system. We recommend that you use the latest long-term support (LTS) version.

tip

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

🌐 Please install Node.js using pre-built installers for your platform. You may encounter incompatibility issues with different development tools otherwise. If you are using macOS, we recommend using a package manager like Homebrew or nvm to avoid any directory permission issues.

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

🌐 To check that Node.js was installed correctly, you can use the -v flag when running the node and npm commands. These should print out the installed versions.

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

虽然你需要在本地安装 Node.js 来搭建 Electron 项目，Electron 并不使用你系统的 Node.js 安装来运行其代码。相反，它自带了自己的 Node.js 运行时。这意味着你的终端用户无需自己安装 Node.js 就可以运行你的应用。

🌐 Although you need Node.js installed locally to scaffold an Electron project, Electron does not use your system's Node.js installation to run its code. Instead, it comes bundled with its own Node.js runtime. This means that your end users do not need to install Node.js themselves as a prerequisite to running your app.

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

🌐 To check which version of Node.js is running in your app, you can access the global process.versions variable in the main process or preload script. You can also reference https://releases.electronjs.org/releases.json.