Skip to main content

打包你的应用

按照教程进行操作

这是 Electron 教程的第5部分。

🌐 This is part 5 of the Electron tutorial.

  1. 先决条件
  2. 构建你的第一个应用
  3. 使用预加载脚本
  4. 添加功能
  5. 打包你的应用
  6. 发布与更新

学习目标​

🌐 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 二进制文件打包在一起。打包后的代码会生成到一个文件夹中。
  2. 然后它将使用这个打包的应用文件夹为每个配置的制作器创建一个单独的可分发文件。

脚本运行后，你应该会看到一个 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.

info

有关代码签名的更多信息，请查看 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.