基本要求

基本要求 - 图1教程目录

这是 Electron 教程的第 1 部分 。

  1. 基本要求
  2. 创建您的第一个应用程序
  3. 使用预加载脚本
  4. 添加功能
  5. 打包您的应用程序
  6. 发布和更新

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

本教程将指导您使用 Electron 开发一个桌面应用，并将其分发给终端用户。

目标

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

如果您希望从单命令样板开始项目，我们建议您使用 Electron Forge 的 create-electron-app 命令。

前言

Electron 是网页应用 (web apps) 的一个原生包装层，在 Node.js 环境中运行。 因此，本教程假设您已经对 Node.js 和前端 Web 开发有一定地了解。 如果您还需要了解一些背景知识，我们推荐您阅读：

所需工具

代码编辑器

您需要一个文本编辑器来编写代码。 We recommend using Visual Studio Code, although you can choose whichever one you prefer.

命令行工具

在整个教程中，我们将要求您使用各种命令行接口 (CLI) 。 您可以使用系统的默认命令行工具：

  • Windows: 命令提示符 / PowerShell
  • macOS: Terminal
  • Linux: 视发行版决定 (如 GNOME 终端 Konsole)

大多数代码编辑器也内置了终端，您也可以使用它们。

Git 和 GitHub

Git 是常用的版本控制系统，GitHub 是一个基于它的协作开发平台。 虽然它们对开发 Electron 应用而言不是必需的，但我们在后续教程中会使用 GitHub Releases 来实现软件的自动更新。 因此，我们建议您：

如果您对 Git 还不熟悉，我们推荐阅读 GitHub 的 Git 指南 。 如果您喜欢可视化界面而不是命令行，也可以使用 GitHub Desktop 。

我们建议您创建一个本地 Git 仓库，在阅读教程之前将其推送到 GitHub，并且在完成教程各个步骤后将代码提交上去。

基本要求 - 图2通过 GitHub Desktop 安装 Git

如果您的操作系统中没有安装 Git，GitHub Desktop 会自动帮您安装 Git 最新版本。

Node.js 和 npm

要开发 Electron 应用，您需要安装 Node.js 运行环境和它的包管理器 npm。 我们推荐安装最新的长期支持 (LTS) 版本。

基本要求 - 图3提示

请使用为你平台预构建的 Node.js 安装器来进行安装， 否则，您可能会遇到与不同开发工具不兼容的问题。 如果您使用 macOS，我们推荐使用如 Homebrew 或 nvm 这样的包管理器，来避开读写目录权限问题。

要检查 Node.js 是否已被安装，您可以在运行 node 和 npm 命令时，加上 -v 参数。 如果已安装，它们应当会输出对应的版本。

  1. $ node -v
  2. v16.14.2
  3. $ npm -v
  4. 8.7.0

基本要求 - 图4注意事项

虽然您需要在开发环境安装 Node.js 才能编写 Electron 项目，但是 Electron 不使用您系统的 Node.js 环境来运行它的代码。 相反地，它使用它内置的 Node.js 运行时。 这意味着您的终端用户不需要 Node.js 环境也可以运行您的应用。

要查看您应用内置的 Node.js 版本，您可以访问主进程 (main process) 或预加载脚本 (preload script) 中的 process.versions 变量。 You can also reference https://releases.electronjs.org/releases.json.