如果你像我一样，喜欢 JavaScript 及其生态系统，并且你一直在使用 React 等框架或带有 NodeJS 的高性能 Web 服务器构建出色的 Web 应用程序 。现在你想开发一个桌面应用程序，并且不想学习新的编程语言，或者你想尽可能多地重复使用现有的 Web 项目。这是 Electron 进入图片以节省一天的时间。
Electron 允许你使用 HTML、CSS 和 JavaScript 构建桌面应用程序。互联网上有很多反对 Electron 的争论，其中之一是它的性能和许多低质量的应用程序，但不要责怪框架；Electron 功能强大且性能卓越。如今，许多流行的应用程序都运行在 Electron 之上，例如 VS Code、Slack、Skype、Discord 等。
但是，为什么那么多人反对它呢？问题始于应用程序和人们使用 Electron 的方式。对于许多人来说，将 Web 应用程序移植到 Electron 意味着按原样保留现有代码并将其嵌入到 Electron 容器中。这是一件可怕的事情吗？也许不是，但你并没有充分利用 Electron 的强大功能。你只是更改独立应用程序的浏览器选项卡。
我们可以改进什么？Electron如何构建桌面应用程序？在本文中，我们将探索 Electron 的基础知识，并构建一个示例应用程序来展示 Electron 的一些方法。
Electron是如何工作的？
Electron 建立在 3 个主要组件之上：
- Chromium：负责网页内容
- NodeJS：用于与操作系统交互
- 自定义APIs：解决与操作系统打交道时的常见问题
这些组件中的每一个都在 Electron 架构层的不同级别上进行交互，如架构图所示。
Electron 使用两种类型的过程。
- Main Process：负责窗口管理以及与操作系统的所有交互。这就是一切的开始，它可以创建和管理多个渲染器进程
- 渲染器进程：可能有一个或多个，每个都将托管一个 Chromium 实例并负责 Web 内容。
重要的是要注意渲染器进程不能直接访问操作系统功能。相反，它们通过 IPC与Main Process通信以完成这些任务。
许多典型的 Electron 应用程序会使用主进程来创建一个渲染器进程并加载它们的 Web 应用程序。今天，我们将向前迈出一步。
必备部分：Hello World！
Electron如何构建桌面应用程序？接下来，我们将构建一个“hello world！” 应用。我们不会使用任何不必要的框架或库来专注于 Electron 代码。
让我们开始吧。
设置Electron
Electron构建桌面应用程序示例介绍 - 构建应用程序的第一步是创建一个项目并安装Electron库，所以从使用 NPM 创建项目开始：
npm init
并设置你的应用程序详细信息。作为应用程序的起点，我喜欢使用 main.js，但你可以使用任何你想要的文件名。
接下来，安装Electron。
npm install -D electron@latest
Electron构建桌面应用程序教程：构建屏幕
对于我们的微型 hello world 示例，我们需要两个文件，main.js以及hello-world.html. main.js是我们的主要流程；我们将创建第一个渲染器进程来加载我们的hello-world.html.
这是启动代码 main.js
const { app, BrowserWindow } = require('electron');
/**
* Creates the main window
*/
function createMainWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('hello-world.html');
win.webContents.openDevTools()
}
app.whenReady().then(createMainWindow);
// When all windows are closed exit the app, except in macOS.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
});
// When the application gets activated create the main window if one does not exist
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createMainWindow()
}
});
初学者工具包将处理运行应用程序的最少操作，创建第一个渲染器new BrowserWindow并main.html在其上加载。它还将解决一些退出应用程序并在需要时重新启动主窗口的情况。
Electron构建桌面应用程序示例：至于我们，main.html我们将使用以下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
Electron如何构建桌面应用程序？它只是一个简单的 HTML，公开了我们的应用程序使用的 node、chrome 和 Electron 的当前版本。
最后，我们需要运行我们的应用程序；首先，你需要更改package.json并添加启动脚本。
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
你的“脚本”部分现在应该是这样的。
是时候测试一下了！在终端运行
npm start
如果一切顺利，你应该会看到如下窗口：
没有更简单的方法吗？
简短的回答是肯定的！虽然这是有代价的。许多样板为构建 Electron 应用程序提供了一个起点，其中一些使用 vanilla JS，其他直接与一些最流行的框架（如 React 和 Vue）集成。
我不是这些样板的忠实粉丝，因为它们通常带有许多我不需要的库和添加项。但它们是让你入门的好地方。
以下是一些流行的：
构建流畅的应用程序
Electron构建桌面应用程序教程：我们已经在 Electron 的架构中看到了事情是如何运作的。如果你和我一样，你可能会担心 Chromium 和 Node 运行的所有这些实例，你应该担心。我们都知道 Chromium（或 Chrome）如何吞噬我们的内存并影响我们的性能，那么我们如何才能避免基于 Chromium 的应用程序做到这一点呢？我们如何保持它们的性能？
这里有一些提示：
永远不要阻塞主进程
主要过程是一切开始的地方。它是应用程序所有进程的父进程。它主要与操作系统通信，处理所有窗口和它们之间的通信，并运行 UI 线程。
阻止此进程意味着应用程序将停止响应，直到操作完成。在任何情况下，都不要在此处运行占用大量 CPU 并需要很长时间才能完成的代码。
以下是一些建议：
- 对于 CPU 密集型操作，将这些功能委托给工作线程、渲染器进程，或者甚至生成一个专用进程来执行该任务（但请确保你知道自己在为最后一个做什么）。
- 尽量避免使用
remote模块。使用remote模块在不知不觉中阻塞 UI 线程太容易了。 - 避免在主线程上使用阻塞 I/O 操作；如果需要，请使用 NodeJS 提供的异步等效项。
可以阻止渲染器进程吗？
并不真地。也许后果不会像阻塞主进程那样有害，但是阻塞渲染器是有代价的。你的 Windows 可能会变得迟钝或无响应，并且整体用户体验会很糟糕。
我们在使用网络时，习惯了一些网络应用突然变慢、不流畅，我们都可以接受；但是，对于桌面应用程序，我们的标准更高。请注意这一点，因为用户期望很重要。
我该怎么做才能使我的应用程序响应更快？几乎可以在我们的网络应用程序上做同样的事情；毕竟，在渲染器过程中，我们只是在谈论 Chromium。
- requestIdleCallback：允许在浏览器空闲时间排队执行 JavaScript 的 API，无论是在帧结束时还是在用户不活动时。
- Web Worker：通过将它们分配给新线程来在 Web 浏览器上运行昂贵计算的最佳工具。
你不需要跨浏览器兼容性
在 web 开发过程中，使用 polyfills 来支持不同的浏览器是非常典型的。在构建 Electron 应用程序时，你不需要任何这些。如果它在 Chromium 上运行，它就在 Electron 上运行，并且不需要支持任何其他浏览器。通过不加载这些额外的模块，减少你的包，并让一切变得更快。
捆绑所有代码
在 Web 开发中，我们有时会从服务器加载脚本或页面，例如 CDN，它们与我们的应用程序分开提供，这很好。毕竟，对于网络，我们总是需要下载这些资产来运行应用程序。
对于桌面应用程序，这是不同的。通过捆绑应用程序中的所有静态资产、脚本和内容来避免任何不必要的网络请求。这将使你的应用程序可以做两件事，离线工作，并加快加载过程，因为读取磁盘比访问互联网便宜。
Electron构建桌面应用程序教程结论
Electron如何构建桌面应用程序？下次你需要构建跨平台的桌面应用程序时，我建议你尝试使用 Electron，特别是如果你来自 JavaScript，并且你已经拥有一些可以重用的代码。
请注意，如果使用得当，Electron 会很棒。请记住，尽管它看起来像 Web，但并不完全准确，因此你需要进行一些特殊考虑才能使其正常工作。
谢谢阅读！
