基本要求

基本要求 - 图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 开发有一定地了解。 如果您还需要了解一些背景知识，我们推荐您阅读：

所需工具

代码编辑器

您需要一个文本编辑器来编写代码。 我们建议使用 Visual Studio Code， 您也可以选择自己喜欢的任何一个。

命令行工具

在整个教程中，我们将要求您使用各种命令行接口 (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 变量。 更多信息可以参考https://releases.electronjs.org/releases.json。