Skip to main content

先决条件

按照教程进行操作

这是 Electron 教程的第 1 部分。

¥This is part 1 of the Electron tutorial.

  1. 先决条件

    ¥Prerequisites

  2. 构建你的第一个应用

    ¥Building your First App

  3. 使用预加载脚本

    ¥Using Preload Scripts

  4. 添加功能

    ¥Adding Features

  5. 打包你的应用

    ¥Packaging Your Application

  6. 发布与更新

    ¥Publishing and Updating

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

¥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 Code，但你可以选择你喜欢的任何一个。

¥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

    ¥Windows: Command Prompt or PowerShell

  • 苹果系统：终端

    ¥macOS: Terminal

  • Linux：取决于发行版（例如 GNOME Terminal、Konsole）

    ¥Linux: varies depending on distribution (e.g. GNOME Terminal, 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

如果你尚未安装，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.

提示

请使用适合你平台的预构建安装程序来安装 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
提醒

尽管你需要在本地安装 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.