翻译 |《JavaScript Everywhere》第 18 章 带 Electron 的桌面应用程序
写在最后面
大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。
为了进步大家的浏览体验，对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央，或者你有任何意见或者倡议，能够在评论区留言，或者加我的微信：code_maomao，欢送互相沟通交流学习。
(σﾟ∀ﾟ)σ..:*☆哎哟不错哦
第 18 章 带 Electron 的桌面应用程序
我第一次接触集体计算机是在一个充斥 Apple II 机器的学校实验室中进行的。
每周一次，我和我的同学被老师带进教室，给了一些软盘，并给出了无关如何加载应用程序（通常是 Oregon Trail）的粗略阐明。在这些课程上，除了记得本人发愣之外，我对其余事件记不清了。自1980 年代中期以来，集体计算机曾经走了很长一段路，然而咱们依然须要依附桌面应用程序来执行许多工作。
通常，我可能会拜访电子邮件客户端、文本编辑器、聊天客户端、电子表格软件、音乐流服务以及其余多个桌面应用程序。个别，这些应用程序具备与 Web 应用程序等效的性能，然而桌面应用程序的便利性和集成性能够为用户带来很多益处。然而，多年来，创立这些应用程序的能力始终十分不足。值得庆幸的是，明天，咱们可能应用网络技术来构建性能全面的桌面应用程序，而且学习曲线很小。
咱们正在构建什么
在接下来的几章中，咱们将为 Notedly 的社交笔记应用程序构建一个桌面客户端。咱们的指标是应用 JavaScript 和Web技术来开发桌面应用程序，用户能够下载并装置在计算机上。目前，该应用程序将是一个简略的实现，它将咱们的 Web 应用程序包装在桌面应用程序 shell 中。以这种形式开发咱们的应用程序将使咱们可能疾速将桌面应用程序发送给感兴趣的用户，同时为咱们提供了当前为桌面用户引入自定义应用程序的灵活性。
咱们将如何构建它
要构建咱们的应用程序，咱们将应用 Electron，它是一个凋谢源代码的框架，用于应用Web 技术构建跨平台的桌面应用程序。它能够利用 Node.js 和Chrome的根底浏览器引擎 Chromium 来工作。
这意味着作为开发人员，咱们能够应用浏览器、Node.js和特定于操作系统的性能，而这些性能通常在 Web 环境中不可用。Electron最后是由 GitHub 为Atom文本编辑器开发的，但尔后始终用作大小应用程序的平台，包含 Slack，VS Code，Discord 和WordPress Desktop。
入门
在开始开发之前，咱们须要将我的项目启动程序文件复制到咱们的电脑上。
我的项目的源代码蕴含了开发应用程序所需的所有脚本和对第三方库的援用。
要将代码克隆到咱们的本地计算机，请关上终端，切换到保留我的项目的目录，而后 git clone 我的项目存储库。如果你曾经钻研过 API 和Web章节，则可能曾经创立了一个 notedly目录来放弃我的项目代码的有条理：
$ cd Projects
$ # type the `mkdir notedly` command if you don't yet have a notedly directory
$ cd notedly
$ git clone git@github.com:javascripteverywhere/desktop.git
$ cd desktop
$ npm install装置第三方依赖项
通过制作本书的入门代码的正本，并在目录中运行npm install，你无需为任何第三方依赖项再次运行npm install。
该代码的构造如下：
- /
src
这是你随书一起进行开发的目录。
- /
solutions
该目录蕴含每章的解决方案。
如果你卡住了，这些能够供你参考。
- /
final
该目录蕴含最终的工作我的项目。
创立我的项目目录并装置依赖项之后，咱们就能够开始开发了。
咱们的第一个电子应用程序
将咱们的代码存储库克隆到咱们的电脑后，让咱们开发咱们的第一个 Electron 应用程序。如果你在 src 目录中查找，则会看到其中有一些文件。index.html文件蕴含了 HTML 标记。目前，该文件将用作 Electron 的“渲染器过程”，这意味着它将是咱们 Electron 应用程序显示为窗口的网页。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Notedly Desktop</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>咱们将在 index.js 文件中设置咱们的 Electron 应用程序。在咱们的应用程序中，该文件将蕴含 Electron 所谓的“主过程”，它定义了应用程序 shell。次要过程通过在Electron 中创立一个 BrowserWindow 实例来工作，该实例用作应用程序shell。
index.js 与 main.js
在咱们的案例利用中的其余局部都是用的 index.js 命名，然而通常在软件开发中命名 main.js 来命名“主程序”。让咱们设置次要过程以显示蕴含 HTML 页面的浏览器窗口。首先，导入 Electron 的应用程序，而后写 src/index.js 中的browserWindow 性能：
const {app, BrowserWindow} = require('electron');当初，咱们能够定义应用程序的 browserWindow 并定义应用程序将加载的文件。在src/index.js 中，增加以下内容：
const {app, BrowserWindow} = require('electron');
// to avoid garbage collection, declare the window as a variable
let window;
// specify the details of the browser window
function createWindow() {
window = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {nodeIntegration: true}
});
// load the HTML file
window.loadFile('index.html');
// when the window is closed, reset the window object
window.on('closed', () => {window = null;});
}
// when electron is ready, create the application window
app.on('ready', createWindow);有了这个，咱们开始筹备在本地运行咱们的桌面应用程序。在终端应用程序中，从我的项目目录中运行以下命令：
$ npm start该命令将运行电子src/index.js，启动咱们应用程序的开发环境版本（请参阅图18-1）。
图 18-1。运行启动命令将启动咱们的“Hello World”Electron 应用程序
macOS 应用程序窗口详细信息
macOS解决应用程序窗口的形式与 Windows 不同。当用户单击“敞开窗口”按钮时，应用程序窗口将敞开，但应用程序自身不会退出。单击 macOS 扩大坞中的应用程序图标将从新关上应用程序窗口。Electron容许咱们实现此性能。将以下内容增加到src/index.js 文件的底部：
// quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS only quit when a user explicitly quits the application
if (process.platform !== 'darwin') {app.quit();
}
});
app.on('activate', () => {
// on macOS, re-create the window when the icon is clicked in the dock
if (window === null) {createWindow();
}
});增加此性能后，你能够通过退出应用程序并应用 npm start 命令从新运行它来查看这些更改。当初，如果用户正在应用 macOS 拜访咱们的应用程序，则他们在敞开窗口时将看到预期的行为。
开发者工具
因为 Electron 基于 Chromium 浏览器引擎（Chrome，Microsoft Edge，Opera和许多其余浏览器），它还使咱们可能应用 Chromium 的开发人员工具。这使咱们可能执行与浏览器环境中雷同的所有的 JavaScript 调试。让咱们查看咱们的应用程序是否处于开发模式，如果是，请在应用程序启动时主动关上开发工具。
要执行此查看，咱们将应用 electronic-util 库。这是一小部分的实用程序，可让咱们轻松查看零碎条件并简化常见 Electron 的款式代码。
当初，咱们将应用 is 模块，这将使咱们可能查看咱们的应用程序是否处于开发模式。
在咱们的src/index.js 文件的顶部，导入模块：
const {is} = require('electron-util');当初，在咱们的利用程序代码中，咱们能够在 window.loadFile(index.html) 加载咱们的HTML 文件，当应用程序处于开发环境中时，它将关上开发工具（图18-2）：
// if in development mode, open the browser dev tools
if (is.development) {window.webContents.openDevTools();
}
图18-2。当初，当咱们在开发过程中关上应用程序时，浏览器开发工具将主动关上。
Electron 平安正告
你可能会留神到，以后咱们的 Electron 应用程序显示了与不平安的内容安全策略（CSP）相干的平安正告。咱们将在下一章中解决此正告。
通过轻松拜访浏览器开发工具，咱们为开发客户端应用程序做好了充沛的筹备。
Electron API
桌面开发的长处之一是，通过 Electron API，咱们能够拜访操作系统级别的性能，而这些性能在Web 浏览器环境中是不可用的，其中包含：
- 告诉事项
- 本机文件拖放
macOS暗模式- 自定义菜单
- 强壮的键盘快捷键
- 零碎对话框
- 利用托盘
- 零碎信息
你能够设想，这些选项使咱们可能为桌面客户端增加一些独特的性能并改善用户体验。咱们不会在简略的示例应用程序中应用它们，然而你须要相熟它们。Electron的文档提供了每个 Electron API 的具体示例。此外，Electron团队还创立了 electron-api-demos，这是一个功能齐全的Electron 应用程序，演示了 Electron API 的许多独特性能。
论断
在本章中，咱们探讨了应用 Electron 通过 Web 技术构建桌面应用程序的根底。Electron环境为咱们（作为开发人员）提供了一个向用户提供跨平台桌面体验的机会，而无需学习多种编程语言和操作系统的复杂性。借助咱们在本章中摸索的简略设置以及 Web 开发的常识，咱们为构建强壮的桌面应用程序做好了充沛的筹备。在下一章中，咱们将钻研如何将现有的 Web 应用程序合并到 Electron Shell 中。
如果有了解不到位的中央，欢送大家纠错。如果感觉还能够，麻烦你点赞珍藏或者分享一下，心愿能够帮到更多人。