ElectronJS 中的热重载 |套装 – 2

ElectronJS是一个开源框架，用于使用能够在 Windows、macOS 和 Linux 操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和NodeJS 组合成一个单一的运行时。

这篇文章是ElectronJS 中热重载的延续。在上一篇文章中，我们讨论了什么是热重载/实时重载，以及我们如何分别使用电子重载和电子重载器npm包在电子应用程序中实现它。在本文中，我们将分别使用elemon和electron-hot-reload npm 包在 Electron 应用程序中实现 Hot Reload。此外，如上一篇文章所述，热重载功能应该只在开发环境中实现。因此，我们使用NODE_ENV环境变量来定义与上一篇文章中使用的相同。我们可以使用 Electron 中的全局进程对象访问这个变量。

• 请参阅文章： ElectronJS 中的进程对象。

我们还可以从 Windows 控制台设置此环境变量。有关 Electron 中支持和使用的环境变量的更多详细信息。

• 请参阅文章： ElectronJS 中的环境变量。

如果我们想要一个在所有 OS 平台上都支持并且不需要任何配置更改的开发暂存环境的解决方案，我们也可以参考文章：在 ElectronJS 中管理暂存环境。我们将继续使用我们在上一篇文章中停止的相同代码库。项目结构和package.json文件也保持不变。我们现在将分别使用elemon和electron-hot-reload npm 包来实现热重载功能。

• 首先，我们将使用npm安装elemon 。

npm install elemon --save

• 使用npm安装电子热重载。

npm install electron-hot-reload --save

这两个包完全不相关，具有不同的语法和使用不同的方法。我们可以在 Electron 中分别使用这两个包来实现热重载功能。设置 Electron 应用程序所需的基本步骤保持不变。

包.json：

{
  "name": "electron-hot",
  "version": "1.0.0",
  "description": "Hot Reload for Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.2.5",
    "electron-hot-reload": "^0.1.4",
    "elemon": "^5.0.3"
  },
  "devDependencies": {
    "electron-reload": "^1.5.0",
    "electron-reloader": "^1.0.1"
  }
}

输出：

注意：对NODE_ENV环境变量的透彻理解可以参考上一篇文章。

• 方法一：使用elemon npm包。 elemon是一个轻量级模块，它提供了一种在开发 Electron 应用程序时添加热重载功能的简单有效的方法。此外，此包只能在应用程序的主进程中发出app模块的就绪事件后才能使用。根据该包的作者和贡献者的说法，该代码符合标准 JS ，该标准定义了一组在JavaScript 中编码时需要遵循的规则。当使用这个包在 Electron 中实现热重载时，如果任何渲染器进程有任何变化，相应的BrowserWindow实例将被重新加载，但是当应用程序的主进程(即main.js文件)发生变化时，应用程序退出当前实例并使用新实例重新启动以反映更改。
• 有关更多详细信息，请参阅链接：从 Electron v8.3.0 开始，该软件包符合标准并且可以正常工作，并且会定期更新。

https://www.npmjs.com/package/elemon. 

• main.js ：在该文件中添加以下代码段。我们将把这段代码添加到createWindow()函数。

javascript

const env = process.env.NODE_ENV || 'development';
// ..
    // Open the DevTools.
    win.webContents.openDevTools()
  
    if (env === 'development') {
        const elemon = require('elemon')
        elemon({
            app: app,
            mainFile: 'main.js',
            bws: [
                // The BrowserWindow Instance used 
                // in the createWindow() function is win. 
                { bw: win, res: ['index.html'] },
            ]
        });
    }

• 说明： elemon(refs) Instance 方法接受以下参数。此方法没有任何返回类型。在此 Instance 方法中传递的所有参数都是必需的。
  • refs: Object此对象引用对应用程序实例、 BrowserWindow实例、主进程文件以及相应的渲染器进程文件和实例的引用。它接受以下参数。
    • app: Object此参数接受一个对象，该对象表示在main.js文件开头导入的主应用程序模块的实例。
    • mainFile: String这个参数接受一个代表主进程文件名的字符串。在本例中，它是main.js文件。
    • bws: Object[]这个参数接受一个对象数组，每个对象代表各自的BrowserWindow实例及其关联的文件和资源。如果在应用程序的主进程中定义了多个BrowserWindow实例，那么每个BrowserWindow实例将在数组中表示为一个单独的对象。每个bws对象都接受以下参数。
      • bw: Object该参数表示全局BrowserWindow实例。
      • res: String[]此参数代表一个字符串数组，其中每个字符串代表一个资源或文件的名称，该文件以某种方式连接到该BrowserWindow实例。在我们的例子中，这个参数将由index.html作为res数组中唯一的 String 元素组成。请参阅代码以获得更好的理解。

• 方法 2：使用电子热重载npm 包。 electron-hot-reload也是一个轻量级的模块，它提供了一种在开发 Electron 应用程序时添加热重载功能的简单方法。此外，此包只能在应用程序的主进程中发出app模块的就绪事件后才能使用。这个包不像elemon那样流行，但它提供了一组与其他包不同的功能。这个包最关键的特性是它为应用程序的主进程和不同的渲染器进程提供了单独的观察者，因此，使它对每个进程更可定制。我们还可以在文件的热重载之前指定钩子，我们可以直接指定我们想要热重载的文件的名称。如果我们指定，此包还提供了捕获应用程序中未处理错误的额外优势。
• 有关更多详细信息，请参阅链接：此包的行为与elemon的行为相同。在Main Process 的更改中，应用程序会重新启动，而在Renderer Process 的更改中，相应的BrowserWindow Instance 将重新加载。这个包是兼容的，从 Electron v8.3.0 开始没有任何错误，但它不会定期更新。

https://www.npmjs.com/package/electron-hot-reload. 

• main.js ：在该文件中添加以下代码段。我们将在文件末尾添加此代码片段，而不会触及任何现有代码。

javascript

// Importing the watchers from electron-hot-reload
const { mainReloader, rendererReloader } = require('electron-hot-reload')
const env = process.env.NODE_ENV || 'development';
// ..
if (env === 'development') {
    const mainFile = path.join(__dirname, 'main.js');
    const rendererFile = path.join(__dirname, 'index.html');
      
    mainReloader(mainFile, (error, path) => {
        console.log(path);
        console.log("It is a main's process hook!");
    });
      
    rendererReloader(rendererFile, (error, path) => {
        console.log(path);
        console.log("It is a renderer's process hook!");
    });
}

• 说明： mainReloader(paths, ignore, handler, options)实例方法和rendererReloader(paths, ignore , handler, options )实例方法具有相同的方法签名。这两个 Instance 方法都采用以下参数。这两种方法都没有任何返回类型。
  • 路径：字符串/字符串[]该参数接受一个字符串参数或一个字符串数组，表示要进行热重载监视的文件的路径。我们需要指定文件的完整路径，因此我们使用了NodeJS路径模块的path.join()方法。在本教程中，我们分别为Main Process和Renderer Process watchers指定了main.js文件和index.html的路径。
  • 忽略：RegExp/RegExp[](可选)此参数是一个可选参数。此参数接受一个RegExp参数或一个RegExp 数组，这些参数表示热重载要忽略的文件和目录的正则表达式。有关RegExp 的更多详细信息，请参阅文章： JavaScript RegExp [abc] Expression 。要了解 JavaScript 中正则表达式的工作原理，请参阅文章： JavaScript 正则表达式。
  • handler: 函数 (Optional)这个函数是可选的。此函数是一个回调函数，用于创建钩子并捕获应用程序中未处理的错误，如描述中所述。该函数接收两个参数：
    • 错误未处理的错误。
    • path文件的路径已更改。