翻译 | 《JavaScript Everywhere》第20章 Electron部署

写在最前面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者你有任何意见或者建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎相互沟通交流学习。

(σﾟ∀ﾟ)σ..:*☆哎哟不错哦

第20章 Electron部署

第一次教编程课程时，我想到了一个聪明的想法，就是通过文字冒险游戏介绍课程主题。学生将进入实验室，坐在桌前，并浏览一系列有趣的提示（对我而言）和说明。这引起了混合，不是开玩笑（嗯，也许是因为开玩笑），而是因为学生没有以这种方式与“程序”互动。这些学生习惯了GUI（图形用户界面），通过文本提示与程序进行交互对于他们中的许多人来说都是不适应的。

目前运行我们的应用程序，我们需要在终端应用程序中键入命令来启动Electron进程。在本章中，我们将研究如何打包应用程序进行分发。为此，我们将使用流行的Electron Builder 库，它将帮助我们打包应用程序并将其分发给用户。

Electron Builder

Electron Builder是一个用于简化打包和分发Electron、ProtonNative应用程序的库。

虽然还有其他打包解决方案，但Electron Builder可以简化与应用程序分发相关的许多难题，包括：

代码签名
多平台部署目标
自动更新
部署

它在灵活性和功能性之间取得了很好的平衡。此外，尽管我们不会使用它们，但Webpack， React， Vue和 Vanilla JavaScript都有一些Electron Builder配套案例。

Electron Builder与Electrom Forge

Electron Forge 是另一个流行的库，提供了许多与Electron Builder类似的功能。

Electron Forge的主要优点是它基于官方的Electron库，而Electron Builder是独立的构建工具。

这意味着用户将从技术生态系统的增长中受益，有了更多的选择。缺点是Electron Forge基于更加严格的应用程序设置。就本书而言，Electron Builder可在功能和学习成本之间找到适当的平衡，但我希望你也仔细阅读一下Electron Forge。

配置Electron Builder

Electron Builder的所有配置将在我们应用程序的 package.json 文件中进行。

在该文件中，我们可以看到 electron-builder 已被列为开发的依赖项。在 package.json 文件中，我们可以包含一个名为“ build”的键名key，该key 将包含Electron Builder打包应用程序的所有说明。首先，我们将包括两个字段：

appId

这是我们应用程序的唯一标识符。macOS将这个视为CFBundleidentifier，Windows将其称为AppUserModelID。标准是使用反向DNS格式。例如，如果我们经营一家域为 jseverywhere.io的公司并构建一个名为Notedly的应用程序，则ID为 io.jseverywhere.notedly 。

productName

这是我们便于阅读的产品名称，package.json名称字段需要带连字符或单个单词的名称。

总之，我们开始的构建配置将如下所示：

"build": {
"appId": "io.jseverywhere.notedly",
"productName": "Notedly"
},

Electron Builder为我们提供了许多配置选项，在本章中我们将探讨其中的几个。

有关完整列表，请访问Electron Builder文档。

为我们当前的平台构建

有了最低限度的配置，我们就可以创建我们的第一个应用程序。默认情况下，Electron Builder将为我们正在开发的系统生成一个应用。例如，由于我是在MacBook上编写的，因此我的应用将默认为macOS。

首先，我们将两个脚本添加到package.json 文件中，这些脚本将负责应用程序的构建。首先，打包脚本将生成打包目录，而不会完全打包应用程序。这对于测试很有用。其次，dist 脚本将可以分发格式打包应用程序，例如macOS DMG，Windows安装程序或DEB程序包。

"scripts": {
// add the pack and dist scripts to the existing npm scripts list
"pack": "electron-builder --dir",
"dist": "electron-builder"
}

进行此更改后，你可以在终端应用程序中运行 npm run dist ，这会将应用程序打包在项目的 dist/ 目录中。切换到 dist / 目录，你可以看到Electron Builder已经打包了该应用程序以供你的操作系统分发。

App 图标

你可能已经注意到的一件事是，我们的应用程序正在使用默认的Electron应用程序图标。这对于本地开发是很好的，但是对于生产用的应用程序，我们将希望使用我们自己的品牌。

在我们项目的 /resources 文件夹中，包含了一些适用于macOS和Windows的应用程序图标。为了从PNG文件生成这些图标，我使用了

iConvert Icons应用程序，可用于macOS和Windows。

在我们的 /resources 文件夹中，你将看到以下文件：

icon.icns ，macOS应用程序图标
Windows应用程序图标icon.ico
Linux所使用的包含一系列大小不同的.png文件的图标目录

（可选）我们还可以通过为视网膜屏幕添加名称分别为background.png 和 background@2x.png的图标来包含macOS DMG的背景图像。

现在，在 package.json 文件中，我们更新构建对象以指定构建资源目录的名称：

"build": {
"appId": "io.jseverywhere.notedly",
"productName": "Notedly",
"directories": {
"buildResources": "resources"
}
},

现在，当我们构建应用程序时，Electron Builder将其与我们的自定义应用程序图标打包在一起（见图20-1）。

图20-1。macOS dock中的自定义应用程序图标

多个平台构建

当前，我们只构建对与我们的开发平台匹配的操作系统的应用程序。

Electron作为平台的最大优势之一是，通过更新dist 脚本，它允许我们使用相同的代码来匹配多个平台。为此，Electron Builder利用了免费和开源代码

electron-build-service。我们将使用该服务的公共实例，但是为了保证额外安全性和隐私性的组织可以自行托管它。

在我们的 package.json中，将dist 脚本更新为：

"dist": "electron-builder -mwl"

这将导致根据macOS，Windows和Linux的构建。

从此处，我们可以通过将应用程序作为发行版上传到GitHub或我们可以分发文件到任何位置（例如Amazon S3或Web服务器）

代码签名

macOS和Windows都包含代码签名的概念。代码签名有助于提高用户的安全性和信任度，因为它保证了应用程序的可信赖性。我不会逐步执行代码签名过程，因为它是特定于操作系统的，并且会给开发人员带来一定的成本。

Electron Builder文档提供了有关各种平台的代码签名的综合文章。

此外， Electron文档还提供了一些资源和链接。

如果你要构建一个产品型应用程序，建议你进一步研究macOS和Windows的代码签名选项。

结论

我们已经介绍了部署Electron应用程序的冰山一角。在本章中，我们使用Electron Builder来构建应用程序，然后，我们可以轻松地通过任何Web主机上传和分发它们。一旦我们满足了这些需求，就可以使用Electron Builder建立一个连续的构建流程：自动将发布推送到GitHub，S3或其他发行平台; 并将自动更新集成到应用程序中。

如果你有兴趣进一步探索电子开发和应用程序分发的主题，则可以采取这些有趣的下一步。

如果有理解不到位的地方，欢迎大家纠错。如果觉得还可以，麻烦您点赞收藏或者分享一下，希望可以帮到更多人。