Rechargement à chaud dans ElectronJs

Le rechargement à chaud est une fonctionnalité puissante d'ElectronJS qui permet aux développeurs de voir rapidement les modifications de code en temps réel sans redémarrer l'application. Il rend le processus de développement plus rapide et plus efficace en réduisant le temps et les efforts nécessaires pour tester les modifications.

Étapes pour implémenter le rechargement à chaud dans ElectronJS

La fonctionnalité de rechargement à chaud est implémentée à l'aide d'une bibliothèque appelée "Electron-Reload", qui peut être facilement intégrée aux applications Electron JS en quelques étapes simples. Les utilisateurs peuvent suivre les étapes ci-dessous pour implémenter le rechargement à chaud dans Electron Js -

Installer le module de rechargement électronique

La première étape pour implémenter le rechargement à chaud dans Electron JS consiste à installer le module d'électro-rechargement. Les utilisateurs peuvent l'installer en utilisant npm comme indiqué ci-dessous -

npm install electron-reload 

Rechargement électronique requis dans le processus principal

Une fois le module de rechargement d'électrons installé, nous devons l'utiliser dans le processus principal de notre application d'électrons. Nous pouvons le faire en ajoutant le code suivant au fichier main.js -

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

Recharger le processus de rendu

La dernière étape consiste à recharger le processus de rendu chaque fois que notre code change. Nous pouvons le faire en ajoutant le code suivant au fichier renderer.js -

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

Options avancées d'utilisation et de personnalisation pour le rechargement à chaud

Le rechargement à chaud dans Electron est facile à configurer, mais le module Electron Reload fournit des options supplémentaires telles que l'ignorance de fichiers et de dossiers spécifiques et l'exclusion de certains modules du rechargement.

Fonctions importantes pour l'implémentation du rechargement à chaud dans ElectronJS

En rechargement à chaud, il y a quelques fonctions importantes à connaître afin de l'implémenter dans notre application Electron -

module.hot.accept() - Cette fonction est utilisée dans le processus de rendu pour permettre le rechargement à chaud du processus de rendu. Lorsque le code du processus de rendu change, le processus de rendu se recharge automatiquement et les modifications sont reflétées dans l'application en temps réel.

ElectronReload(__dirname) - Cette fonction est utilisée dans le processus principal pour permettre le rechargement à chaud du processus principal. Chaque fois que le code change, il recharge le processus principal, nous permettant de voir les effets des changements en temps réel.

app.on('ready', () => {...}) - Ce gestionnaire d'événements est appelé lorsque l'application Electron est prête à être affichée à l'utilisateur. Il est généralement utilisé pour créer la fenêtre principale et charger le fichier HTML initial.

BrowserWindow - Cette classe est utilisée pour créer de nouvelles fenêtres dans les applications Electron. Dans le processus principal, nous pouvons créer des instances de BrowserWindow et définir diverses options, telles que la taille et les préférences Web, pour personnaliser l'apparence et le comportement de chaque fenêtre.

Ces fonctions sont essentielles pour comprendre le fonctionnement du rechargement à chaud dans Electron JS et sont utilisées dans les exemples fournis plus tôt dans ce didacticiel. En comprenant comment utiliser ces fonctions, nous pouvons implémenter le rechargement à chaud dans les applications Electron et apporter des modifications aux processus principaux et de rendu en temps réel.

Exemple

Dans cet exemple, nous créons d'abord une nouvelle application ElectronJS à l'aide du module electro.app et utilisons la méthode on pour enregistrer une fonction de rappel qui se déclenche lorsque l'application est prête. Dans cette fonction de rappel, nous créons une nouvelle fenêtre de navigateur à l'aide du module Electron.BrowserWindow et y chargeons le fichier index.html.

Ensuite, dans le fichier renderer.js, nous utilisons la propriété module.hot pour activer le rechargement à chaud dans le processus de rendu. De cette façon, si nous apportons des modifications au fichier renderer.js, le code mis à jour se rechargera automatiquement.

Enfin, nous utilisons console.log pour enregistrer le message "Hello World!"

Le fichier index.html est un simple fichier HTML qui affiche les titres et les paragraphes et sert d'interface utilisateur à l'application.

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>

Exemple

Dans cet exemple, l'application ElectronJs est configurée pour créer une nouvelle fenêtre lorsque l'événement "ready" est déclenché, et la fenêtre charge le fichier index.html.

Le fichier "renderer.js" contient une instruction de rechargement à chaud du module (HMR) qui recharge le processus de rendu chaque fois que le code change. Il enregistre également "Hello World!" sur la console.

Le fichier "index.html" affiche un titre et un paragraphe indiquant que le rechargement à chaud est activé.

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>

Dans ce didacticiel, les utilisateurs ont découvert la fonctionnalité de rechargement à chaud d'ElectronJS et comment elle rend le processus de développement plus rapide et plus efficace en permettant aux développeurs de voir les effets des modifications de code en temps réel sans redémarrer l'ensemble de l'application.

Les utilisateurs ont également découvert les fonctions et étapes clés pour implémenter le rechargement à chaud dans ElectronJS, telles que l'exigence du module Electron-reload dans le processus principal, le rechargement du processus de rendu et la compréhension de module.hot.accept (etc. fonctions)), electronicReload (__dirname) , app.on('ready', () => {...}) et BrowserWindow. En suivant ces étapes et en comprenant ces fonctionnalités clés, les utilisateurs peuvent implémenter le rechargement à chaud dans nos applications ElectronJS et apporter des modifications aux processus principaux et de rendu en temps réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!