极客教程ElectronJs 热重载
热重载是ElectronJS中的一个强大的功能，它可以让开发者快速地实时查看他们的代码变化，而不需要重新启动应用程序。它通过减少测试变化所需的时间和精力，使开发过程更快、更有效率。
在ElectronJS中实现热重新加载的步骤
热重载功能是通过一个叫做 “electron-reload “的库来实现的，它可以通过几个简单的步骤轻松地集成到Electron JS应用程序中。Users can follow the steps below to implement hot reload in Electron Js −
安装electron-reload模块
在Electron JS中实现热重载的第1步是安装electron-reload模块。用户可以使用npm来安装它，如下所示
npm install electron-reload
在主进程中要求electron-reload
一旦安装了electron-reload模块，我们需要在我们的Electron应用程序的主进程中要求它。我们可以通过在main.js文件中添加以下代码来实现 —
const electronReload = require('electron-reload');
electronReload(__dirname);
重新加载渲染器进程
最后一步是，每当我们的代码有变化时，都要重新加载渲染器进程。我们可以通过在renderer.js文件中添加以下代码来做到这一点 —
if (module.hot) {
module.hot.accept();
}
热重载的高级用法和自定义选项
Electron中的热重载很容易设置，但是 “electron-reload “模块提供了额外的选项，比如忽略特定的文件和文件夹以及排除某些模块的重载。
在ElectronJS中实现热重载的重要功能
在热重载中，有几个重要的函数需要了解，以便在我们的Electron应用程序中实现它 —
module.hot.accept() - 这个函数是在渲染器进程中使用的，用来为渲染器进程启用热重载。当渲染器进程的代码发生变化时，渲染器进程将被自动重载，并且这些变化将实时反映在应用程序中。
electronReload(__dirname) - 这个函数在主进程中使用，以实现主进程的热重载。每当代码发生变化时，它就会重新加载主进程，使我们能够实时地看到我们的变化所带来的影响。
**app.on(‘ready’, () = > {…}) **- 这个事件处理函数在Electron应用程序准备显示给用户时被调用。它通常用于创建主窗口和加载初始HTML文件。
BrowserWindow - 这个类用来在Electron应用程序中创建新窗口。在主程序中，我们可以创建BrowserWindow的实例，并设置各种选项，如大小和网络偏好，以定制每个窗口的外观和行为。
这些函数是理解热重载在Electron JS中如何工作的关键，并在本教程前面提供的例子中使用。通过了解如何使用这些函数，我们可以在我们的Electron应用程序中实现热重载，并对主进程和渲染器进程进行实时更改。
例子
在这个例子中，首先我们使用electron.app模块来创建一个新的ElectronJS应用程序，并使用on方法来注册一个回调函数，当应用程序准备好的时候会被触发。在这个回调函数中，我们使用electron.BrowserWindow模块创建一个新的浏览器窗口，并在其中加载一个index.html文件。
接下来，在renderer.js文件中，我们使用module.hot属性来启用renderer过程中的热重载。这样，如果我们对renderer.js文件做了任何改动，更新后的代码就会自动被重新加载。
最后，我们使用 console.log 将消息 “Hello World!”记录到控制台。
index.html文件是一个简单的HTML文件，显示一个标题和一个段落，作为应用程序的用户界面。
main.js
// main.js
const { app, BrowserWindow } = require('electron');
const electronReload = require('electron-reload');
electronReload(__dirname);
let win;
app.on('ready', () => {
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
});
渲染器.js
// renderer.js
if (module.hot) {
module.hot.accept();
}
document.getElementById('root').innerHTML = 'Hello, Hot Reloading!';
index.html
<html lang = "en" >
<head>
<title> Electorn Js </title>
</head>
<body>
<h2> Hot Reload in ElectornJs </h2>
<p> With hot reloading enabled, any changes made to the code in the "main.js" or "renderer.js" files will be reflected in the application in real-time without requiring a full restart of the application. </p>
</body>
</html>
例子
在这个例子中，electronJs应用程序被设置为在 “ready “事件被触发时创建一个新的窗口，并且该窗口会加载index.html文件。
renderer.js “文件包含一个热模块重载 (HMR) 语句，每当代码发生变化时就会重新加载渲染器进程。它还将 “Hello World!”记录到控制台。
而 “index.html “文件显示了一个标题和一个段落，表明热重载已经启用。
main.js
// main.js
const electron = require('electron');
const electronReload = require('electron-reload');
electronReload(__dirname);
const app = electron.app;
app.on('ready', createWindow);
function createWindow () {
// Create the browser window.
const win = new electron.BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
win.loadFile('index.html')
}
renderer.js
// renderer.js
if (module.hot) {
module.hot.accept();
}
console.log('Hello World!');
index.html
<html>
<head>
<title> Electorn Js </title>
</head>
<body>
<h2> Hot Reload Enabled </h2>
<p> Hot reloading allows for a faster development experience as we can see the effects of our changes immediately. </p>
</body>
</html>
在本教程中，用户了解了ElectronJS中的热重载功能，以及它如何使开发过程更快、更有效，允许开发者实时看到他们的代码修改的效果，而不需要重新启动整个应用程序。
用户还了解了在ElectronJS中实现热重载的关键功能和步骤，比如在主进程中需要electron-reload模块，重载渲染器进程，以及理解模块.hot.accept()、electronReload(__dirname)、app.on(‘ready’, () => {…}) 和BrowserWindow等函数。通过遵循这些步骤和理解这些关键函数，用户可以在我们的ElectronJS应用程序中实现热重载，并对主进程和渲染器进程进行实时更改。