Skip to main content

打包你的应用

按照教程进行操作

这是 Electron 教程的第 5 部分。

¥This is part 5 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

学习目标​

¥Learning goals

在本教程的这一部分中，我们将介绍使用 Electron Forge 打包和分发应用的基础知识。

¥In this part of the tutorial, we'll be going over the basics of packaging and distributing your app with Electron Forge.

使用 Electron Forge​

¥Using Electron Forge

Electron 没有任何打包和分发工具打包到其核心模块中。一旦你在开发模式下有了一个可以运行的 Electron 应用，你需要使用额外的工具来创建一个可以分发给用户的打包应用（也称为可分发应用）。可分发文件可以是安装程序（例如 Windows 上的 MSI）或可移植可执行文件（例如 macOS 上的 .app）。

¥Electron does not have any tooling for packaging and distribution bundled into its core modules. Once you have a working Electron app in dev mode, you need to use additional tooling to create a packaged app you can distribute to your users (also known as a distributable). Distributables can be either installers (e.g. MSI on Windows) or portable executable files (e.g. .app on macOS).

Electron Forge 是一款一体化工具，用于处理 Electron 应用的打包和分发。在底层，它将许多现有的 Electron 工具（例如 @electron/packager、@electron/osx-sign、electron-winstaller 等）组合到一个接口中，因此你不必担心将它们全部连接在一起。

¥Electron Forge is an all-in-one tool that handles the packaging and distribution of Electron apps. Under the hood, it combines a lot of existing Electron tools (e.g. @electron/packager, @electron/osx-sign, electron-winstaller, etc.) into a single interface so you do not have to worry about wiring them all together.

将你的项目导入 Forge​

¥Importing your project into Forge

你可以在项目的 devDependencies 中安装 Electron Forge 的 CLI，并使用方便的转换脚本导入现有项目。

¥You can install Electron Forge's CLI in your project's devDependencies and import your existing project with a handy conversion script.

npm install --save-dev @electron-forge/cli
npx electron-forge import

转换脚本完成后，Forge 应该已将一些脚本添加到你的 package.json 文件中。

¥Once the conversion script is done, Forge should have added a few scripts to your package.json file.

package.json
  //...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  //...
CLI 文档

有关 make 和其他 Forge API 的更多信息，请查看 Electron Forge CLI 文档。

¥For more information on make and other Forge APIs, check out the Electron Forge CLI documentation.

你还应该注意到，你的 package.json 现在在 devDependencies 下安装了更多软件包，以及一个导出配置对象的新 forge.config.js 文件。你应该在预填充的配置中看到多个生成器（生成可分发应用包的包），每个生成器对应一个目标平台。

¥You should also notice that your package.json now has a few more packages installed under devDependencies, and a new forge.config.js file that exports a configuration object. You should see multiple makers (packages that generate distributable app bundles) in the pre-populated configuration, one for each target platform.

创建可分发的文件​

¥Creating a distributable

要创建可分发文件，请使用项目的新 make 脚本，该脚本运行 electron-forge make 命令。

¥To create a distributable, use your project's new make script, which runs the electron-forge make command.

npm run make

此 make 命令包含两个步骤：

¥This make command contains two steps:

  1. 它将首先在后台运行 electron-forge package，它将你的应用代码与 Electron 二进制文件打包在一起。打包后的代码生成到一个文件夹中。

    ¥It will first run electron-forge package under the hood, which bundles your app code together with the Electron binary. The packaged code is generated into a folder.

  2. 然后，它将使用此打包的应用文件夹为每个配置的制造商创建单独的可分发文件。

    ¥It will then use this packaged app folder to create a separate distributable for each configured maker.

脚本运行后，你应该看到一个 out 文件夹，其中包含可分发文件和一个包含打包应用代码的文件夹。

¥After the script runs, you should see an out folder containing both the distributable and a folder containing the packaged application code.

macOS output example
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

out/make 文件夹中的可分发文件应该已准备好启动！你现在已经创建了第一个打包的 Electron 应用。

¥The distributable in the out/make folder should be ready to launch! You have now created your first bundled Electron application.

可分发的格式

Electron Forge 可以配置为以不同的操作系统特定格式（例如 DMG、deb、MSI 等）创建可分发文件。有关所有配置选项，请参阅 Forge 的 创客 文档。

¥Electron Forge can be configured to create distributables in different OS-specific formats (e.g. DMG, deb, MSI, etc.). See Forge's Makers documentation for all configuration options.

创建和添加应用图标

设置自定义应用图标需要在配置中添加一些内容。查看 Forge 的图标教程 了解更多信息。

¥Setting custom application icons requires a few additions to your config. Check out Forge's icon tutorial for more information.

无 Electron Forge 的封装

如果你想手动打包代码，或者你只是有兴趣了解打包 Electron 应用背后的机制，请查看完整的 应用封装 文档。

¥If you want to manually package your code, or if you're just interested understanding the mechanics behind packaging an Electron app, check out the full Application Packaging documentation.

重要的：签署你的代码​

¥Important: signing your code

为了将桌面应用分发给终端用户，我们强烈建议你对 Electron 应用进行代码签名。代码签名是发布桌面应用的重要组成部分，并且对于本教程最后部分中的自动更新步骤是必需的。

¥In order to distribute desktop applications to end users, we highly recommend that you code sign your Electron app. Code signing is an important part of shipping desktop applications, and is mandatory for the auto-update step in the final part of the tutorial.

代码签名是一种安全技术，用于证明桌面应用是由已知来源创建的。Windows 和 macOS 拥有自己的特定于操作系统的代码签名系统，这将使用户难以下载或启动未签名的应用。

¥Code signing is a security technology that you use to certify that a desktop app was created by a known source. Windows and macOS have their own OS-specific code signing systems that will make it difficult for users to download or launch unsigned applications.

在 macOS 上，代码签名是在应用打包级别完成的。在 Windows 上，可分发的安装程序会被签名。如果你已经拥有适用于 Windows 和 macOS 的代码签名证书，则可以在 Forge 配置中设置你的凭据。

¥On macOS, code signing is done at the app packaging level. On Windows, distributable installers are signed instead. If you already have code signing certificates for Windows and macOS, you can set your credentials in your Forge configuration.

信息

有关代码签名的更多信息，请查看 Forge 文档中的 签署 macOS 应用 指南。

¥For more information on code signing, check out the Signing macOS Apps guide in the Forge docs.

forge.config.js
module.exports = {
  packagerConfig: {
    osxSign: {},
    // ...
    osxNotarize: {
      tool: 'notarytool',
      appleId: process.env.APPLE_ID,
      appleIdPassword: process.env.APPLE_PASSWORD,
      teamId: process.env.APPLE_TEAM_ID
    }
    // ...
  }
}

概括​

¥Summary

Electron 应用需要打包才能分发给用户。在本教程中，你将应用导入到 Electron Forge 中，并将其配置为打包应用并生成安装程序。

¥Electron applications need to be packaged to be distributed to users. In this tutorial, you imported your app into Electron Forge and configured it to package your app and generate installers.

为了使你的应用受到用户系统的信任，你需要通过代码签名来数字化地证明可分发的内容是真实的且未被篡改。一旦你将应用配置为使用代码签名证书信息，就可以通过 Forge 对你的应用进行签名。

¥In order for your application to be trusted by the user's system, you need to digitally certify that the distributable is authentic and untampered by code signing it. Your app can be signed through Forge once you configure it to use your code signing certificate information.