Heißes Nachladen in ElectronJs

Hot Reload ist eine leistungsstarke Funktion in ElectronJS, die es Entwicklern ermöglicht, Codeänderungen schnell in Echtzeit zu sehen, ohne die Anwendung neu starten zu müssen. Es macht den Entwicklungsprozess schneller und effizienter, indem es den Zeit- und Arbeitsaufwand für das Testen von Änderungen reduziert.

Schritte zum Implementieren von Hot-Reloading in ElectronJS

Die Hot-Reload-Funktion wird mithilfe einer Bibliothek namens „Electron-Reload“ implementiert, die in wenigen einfachen Schritten problemlos in Electron JS-Anwendungen integriert werden kann. Benutzer können die folgenden Schritte ausführen, um Hot Reloading in Electron Js zu implementieren -

Installieren Sie das elektronische Nachlademodul

Der erste Schritt zur Implementierung von Hot Reloading in Electron JS ist die Installation des Elektro-Reload-Moduls. Benutzer können es mit npm installieren, wie unten gezeigt -

npm install electron-reload 

Elektronennachladung im Hauptprozess erforderlich

Sobald das Elektronen-Nachlademodul installiert ist, müssen wir es im Hauptprozess unserer Elektronenanwendung verwenden. Wir können dies tun, indem wir den folgenden Code zur Datei main.js hinzufügen -

const electronReload = require('electron-reload');
electronReload(__dirname);

Renderer-Prozess neu laden

Der letzte Schritt besteht darin, den Renderer-Prozess neu zu laden, wenn sich unser Code ändert. Wir können dies tun, indem wir den folgenden Code zur Datei renderer.js hinzufügen -

if (module.hot) {
   module.hot.accept();
}

Erweiterte Nutzungs- und Anpassungsoptionen für Hot Reload

Das Hot-Neuladen in Electron ist einfach einzurichten, aber das Electron-Reload-Modul bietet zusätzliche Optionen wie das Ignorieren bestimmter Dateien und Ordner und das Ausschließen bestimmter Module vom Neuladen.

Wichtige Funktionen zur Implementierung von Hot Reloading in ElectronJS

Beim Hot-Reloading müssen Sie einige wichtige Funktionen kennen, um es in unserer Electron-Anwendung zu implementieren -

module.hot.accept() – Diese Funktion wird im Renderer-Prozess verwendet, um ein Hot-Neuladen des Renderer-Prozesses zu ermöglichen. Wenn sich der Renderer-Prozesscode ändert, wird der Renderer-Prozess automatisch neu geladen und die Änderungen werden in Echtzeit in der Anwendung widergespiegelt.

ElectronReload(__dirname) – Diese Funktion wird im Hauptprozess verwendet, um ein Hot-Reload des Hauptprozesses zu ermöglichen. Immer wenn sich der Code ändert, lädt er den Hauptprozess neu, sodass wir die Auswirkungen der Änderungen in Echtzeit sehen können.

app.on('ready', () => {...}) – Dieser Event-Handler wird aufgerufen, wenn die Electron-App bereit ist, dem Benutzer angezeigt zu werden. Es wird normalerweise verwendet, um das Hauptfenster zu erstellen und die ursprüngliche HTML-Datei zu laden.

BrowserWindow – Diese Klasse wird zum Erstellen neuer Fenster in Electron-Anwendungen verwendet. Im Hauptprozess können wir Instanzen von BrowserWindow erstellen und verschiedene Optionen wie Größe und Webeinstellungen festlegen, um das Erscheinungsbild und Verhalten jedes Fensters anzupassen.

Diese Funktionen sind der Schlüssel zum Verständnis der Funktionsweise von Hot Reloading in Electron JS und werden in den Beispielen weiter oben in diesem Tutorial verwendet. Wenn wir verstehen, wie diese Funktionen verwendet werden, können wir Hot Reloading in Electron-Anwendungen implementieren und Änderungen an den Haupt- und Renderer-Prozessen in Echtzeit vornehmen.

Beispiel

In diesem Beispiel erstellen wir zunächst eine neue ElectronJS-Anwendung mit dem Modul electro.app und verwenden die on-Methode, um eine Rückruffunktion zu registrieren, die ausgelöst wird, wenn die Anwendung bereit ist. In dieser Rückruffunktion erstellen wir mit dem Modul Electron.BrowserWindow ein neues Browserfenster und laden die Datei index.html hinein.

Als nächstes verwenden wir in der Datei renderer.js die Eigenschaft module.hot, um das Hot-Neuladen im Renderer-Prozess zu ermöglichen. Wenn wir auf diese Weise Änderungen an der Datei renderer.js vornehmen, wird der aktualisierte Code automatisch neu geladen.

Abschließend verwenden wir console.log, um die Nachricht „Hello World!“ auf der Konsole zu protokollieren.

Die Datei index.html ist eine einfache HTML-Datei, die Überschriften und Absätze anzeigt und als Benutzeroberfläche der Anwendung dient.

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>

Beispiel

In diesem Beispiel ist die ElectronJs-Anwendung so eingerichtet, dass sie ein neues Fenster erstellt, wenn das „ready“-Ereignis ausgelöst wird, und das Fenster lädt die Datei index.html.

Die Datei „renderer.js“ enthält eine HMR-Anweisung (Hot Module Reload), die den Renderer-Prozess neu lädt, wenn sich der Code ändert. Außerdem wird „Hello World!“ auf der Konsole protokolliert.

Die Datei „index.html“ zeigt einen Titel und einen Absatz an, der angibt, dass Hot Reload aktiviert ist.

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>

In diesem Tutorial lernten Benutzer die Hot-Reload-Funktion in ElectronJS kennen und erfahren, wie sie den Entwicklungsprozess schneller und effizienter macht, indem sie es Entwicklern ermöglicht, die Auswirkungen von Codeänderungen in Echtzeit zu sehen, ohne die gesamte Anwendung neu starten zu müssen.

Benutzer lernten auch die wichtigsten Funktionen und Schritte zum Implementieren von Hot Reloading in ElectronJS kennen, z. B. das Erfordernis des Electron-Reload-Moduls im Hauptprozess, das Neuladen des Renderer-Prozesses und das Verständnis von module.hot.accept (etc. Funktionen) und ElectronReload (__dirname) , app.on('ready', () => {...}) und BrowserWindow. Wenn Benutzer diese Schritte befolgen und diese Schlüsselfunktionen verstehen, können sie Hot Reloading in unseren ElectronJS-Anwendungen implementieren und Änderungen an den Haupt- und Renderer-Prozessen in Echtzeit vornehmen.

Das obige ist der detaillierte Inhalt vonHeißes Nachladen in ElectronJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!