极客笔记ElectronJs 中的热重载
热重载是 ElectronJS 中的一个强大功能，它使开发人员能够在不重新启动应用程序的情况下实时查看其代码变化。通过减少测试变更所需的时间和精力，它使开发过程更快捷高效。
在 ElectronJS 中实现热重载的步骤
使用一个名为“electron-reload”的库实现热重载功能，并通过以下几个简单的步骤轻松集成到 Electron JS 应用程序中。用户可以按照以下步骤在 Electron Js 中实现热重载：
安装electron-reload模块
在 Electron JS 中实现热重载的第一步是安装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的实例并设置各种选项，如大小和Web首选项，以自定义每个窗口的外观和行为。
这些函数是理解Electron JS中热重载的关键，并在本教程中提供的示例中使用。通过了解如何使用这些函数，我们可以在Electron应用程序中实现热重载，并实时更改主进程和渲染器进程。
示例
在这个示例中，首先我们使用electron.app模块创建一个新的ElectronJS应用程序，并使用on方法注册一个回调函数，该函数在应用程序准备好时触发。在此回调函数中，我们使用electron.BrowserWindow模块创建一个新的浏览器窗口，并将index.html文件加载到其中。
接下来，在renderer.js文件中，我们使用module.hot属性来启用渲染器进程的热重载。这样，如果对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');
});
renderer.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模块、重新加载渲染器进程，并了解诸如module.hot.accept()、electronReload(__dirname)、app.on(‘ready’, () => {…})和BrowserWindow等函数的作用。通过遵循这些步骤并理解这些关键函数，用户可以在我们的ElectronJS应用程序中实现热重载，并实时对主进程和渲染器进程进行更改。