跳转至

前提条件

:::info 跟随教程操作

这是 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 开发基础知识。如果你需要在继续之前阅读一些背景资料,我们推荐以下资源:

所需工具

代码编辑器

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

命令行

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

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

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

Git 和 GitHub

Git 是源代码常用的版本控制系统,GitHub 是构建在其之上的协作开发平台。虽然构建 Electron 应用并不严格需要它们,但我们稍后会在教程中使用 GitHub releases 来设置自动更新。因此,我们需要你:

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

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

:::info 通过 GitHub Desktop 安装 Git

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

:::

Node.js 和 npm

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

:::tip

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

:::

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

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

:::caution

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

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

:::

本页原文 Markdown:在 AtomGit 查看·内容源自开源项目 el/electron