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

翻译 | 《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或其他发行平台; 并将自动更新集成到应用程序中。

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

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