翻译 | 《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.icoLinux所应用的蕴含一系列大小不同的.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或其余发行平台; 并将自动更新集成到应用程序中。
如果你有趣味进一步摸索电子开发和应用程序散发的主题，则能够采取这些乏味的下一步。
如果有了解不到位的中央，欢送大家纠错。如果感觉还能够，麻烦您点赞珍藏或者分享一下，心愿能够帮到更多人。
发表回复