Detaillierte Erläuterung zur Verwendung von Node.js zum Implementieren einer Hot-Reload-Seite
VorwortVor nicht allzu langer Zeit habe ich Browser-Sync+Gulp+Gulp-Nodemon kombiniert, um ein Projektgerüst für Hot-Updates in der Produktionsumgebung zu implementieren (mein bisheriges Verständnis war etwas voreingenommen, es sollte als Hot-Updates definiert werden, nicht als Hot-Reloads). Daher werden wir heute Node.js verwenden, um eine Hot-Reload-Seite zu implementieren. Lassen Sie mich heute zusammenfassen, damit Sie nicht denselben Fehler machen wie ich. Heißes Neuladen Durch das sogenannte Hot-Reload kann bei jedem Seitenwechsel eine automatische Aktualisierung ohne manuelles Aktualisieren erfolgen. Heißes Update Durch die aktualisierungsfreie Aktualisierung des Browsers können verschiedene Module zur Laufzeit ersetzt, hinzugefügt oder entfernt werden, ohne dass eine vollständige Aktualisierung zum Neuladen der gesamten Seite durchgeführt werden muss. Zweck: Beschleunigung der Entwicklung, daher nur für den Einsatz in einer Entwicklungsumgebung geeignet. Idee: Bewahren Sie den Zustand der Anwendung, der beim vollständigen Neuladen der Seite verloren geht, und aktualisieren Sie nur den geänderten Inhalt, um Entwicklungszeit zu sparen. Das Anpassen von Stilen ist schneller und fast gleichwertig mit dem Ändern von Stilen im Browser-Debugger. Tatsächlicher Kampf 1. Initialisieren Sie das ProjektVerwenden Sie hier den folgenden Befehl, um das Projekt zu initialisieren. Ich verwende hier das Suffix -y für eine schnellere und bequemere Initialisierung. Wenn Sie es anpassen möchten, können Sie es zeilenweise eingeben. npm init -y Die Initialisierung ist abgeschlossen und es gibt eine zusätzliche Datei package.json im Stammverzeichnis. 2. Erstellen Sie die Node-Hauptdatei app.jsAls Nächstes erstellen wir eine Nodejs-Operationshauptdatei app.js.
const http = erfordern('http');
const express = erfordern('express');
const app = express();
const server = http.createServer(app);
const path = require('Pfad');
const fs = erfordern('fs');
const io = erfordern('socket.io')(server);
app.use(express.static(Pfad.join(__dirname, './public')));
: ErstelleWatcher();
Funktion createWatcher() {
const absolute = "./öffentlich";
fs.watch(absolut, Funktion (Ereignistyp, Dateiname) {
if (Dateiname) {
io.sockets.emit('neu laden');
}
});
}
server.listen(8086, Funktion () {
console.log(`Der Server läuft auf Port 8086.`);
});
Zuerst erstellen wir einen HTTP-Server mit einer Kombination aus HTTP und Express und binden ihn an socket.io. Dann verwenden wir Express, um statische Dateien zu hosten und geben das statische Dateiverzeichnis öffentlich an. Hier verwenden wir die Watch-Methode unter dem fs-Modul, um Änderungen im Dateiverzeichnis zu überwachen. Wenn die Dateien im Verzeichnis geändert werden, wird die Zeile io.sockets.emit('reload'); ausgelöst. Jetzt, da es ausgelöst wurde, muss es einen Ort geben, um es zu überwachen. 3. Erstellen Sie die Datei index.htmlWir erstellen einen öffentlichen Ordner im Stammverzeichnis und eine Datei index.html im Ordner.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8" />
<title>Aktuelle Update-Seite</title>
<link rel="stylesheet" href="style.css" rel="externes nofollow" />
<Stil>
h1 {
Farbe: rot;
}
</Stil>
</Kopf>
<Text>
<h1>Hallo</h1>
<p class="txt">Text</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p Klasse="Name"></p>
<script src="./socket.io.min.js"></script>
<script src="./index.js" Typ="Modul"></script>
<Skripttyp="Modul">
importiere Objekt aus „./index.js“;
io.connect('http://localhost:8086/').on('neu laden', () =>
Fenster.Standort.neu laden()
);
Dokument.QuerySelector('.Name').innerHTML = Objekt.Name;
</Skript>
</body>
</html>Der Dateiinhalt ist wie oben. Das erste, worauf wir achten müssen, ist, wie wir mit dem Hintergrund überwachen. Wir müssen nur die Datei socket.io.min.js importieren (ich werde die Quellcodeadresse am Ende des Artikels angeben) und dann den folgenden Code unten eingeben:
io.connect('http://localhost:8086/').on('neu laden', () =>window.location.reload());http://localhost:8086/ Dies ist die Adresse des Backends. Sie müssen diese Adresse abhören, um mit dem Backend zu kommunizieren. Da wir ein Neuladeereignis im Hintergrund angepasst haben, muss das Front-End nur auf dieses Ereignis hören. Wenn dieses Ereignis im Hintergrund ausgelöst wird, hört der Vordergrund darauf und führt zufällig Code aus. 4. Erstellen Sie andere DateitypenWir können in der Datei index.html oben sehen, dass ich die Dateien index.js und style.js extern importiert habe. Der Hauptzweck besteht darin, festzustellen, ob sich die Seite entsprechend ändert, wenn der Code geändert wird. Die Antwort ist ja. 5. Seite mit Echtzeit-UpdatesWir beginnen mit dem Start des Projekts. Knoten app.js Sie werden sehen, dass auf dem Terminal „Der Server läuft auf Port 8086“ angezeigt wird. Anschließend können Sie die Adresse http://localhost:8086/ im Browser öffnen. Wenn wir den Code ändern, können wir sehen, dass die Seite in Echtzeit angezeigt wird, und wenn wir die Tastenkombination drücken, um den Code zu speichern (es wird empfohlen, dass der Editor den Code nicht automatisch in Echtzeit speichert), wird die Seite in Echtzeit aktualisiert. Ist das nicht sehr praktisch? Sie müssen nicht jedes Mal auf „Aktualisieren“ klicken, wenn Sie die Seite wechseln. Wenn ich daran zurückdenke, wie ich zum ersten Mal JQ zum Schreiben von Seiten verwendet habe, kam ich mir so dumm vor, jedes Mal die gleiche Arbeit zu wiederholen. AbschlussDanke fürs Lesen, ich hoffe, ich habe Ihre Zeit nicht verschwendet. Quellcode-Adresse: https://gitee.com/maomincoding/hot-load Dies ist das Ende dieses Artikels zur Verwendung von Node.js zur Implementierung von Hot-Reload-Seiten. Weitere relevante Inhalte zu Hot-Reload-Seiten von Node.js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
>>: So installieren Sie das Pip-Paket unter Linux
Artikel empfehlen
Zusammenfassung gängiger MySQL-DDL-Operationen
Bibliotheksverwaltung Erstellen einer Bibliothek ...
So aktualisieren Sie die Ansicht synchron nach Datenänderungen in Vue
Vorwort Vor kurzem bin ich auf ein interessantes ...
Detaillierte Erläuterung der ECharts-Mausereignisverarbeitungsmethode
Ein Ereignis ist eine vom Benutzer oder dem Brows...
IP-Whitelist für die Linux-Serverkonfiguration zum Verhindern von Remote-Anmeldungen und Port-Offenlegung
Vorwort Der vom Blogger verwendete Server wurde v...
Löschvorgang für Docker-Volumes
prune Um diesen Befehl verwenden zu können, müsse...
Detaillierte Analyse des Linux-NFS-Mechanismus anhand von Fällen
In Fortsetzung des vorherigen Artikels erstellen ...
Einführung in die Vue3 Composition API
Inhaltsverzeichnis Überblick Beispiel Warum wird ...
Lösung für die Eingabeaufforderung „Keine solche Datei oder kein solches Verzeichnis“ beim Ausführen ausführbarer Dateien unter Linux
Als ich kürzlich das Linux-Betriebssystem zum Aus...
Vue Shuttle-Box ermöglicht Auf- und Abbewegung
In diesem Artikelbeispiel wird der spezifische Co...
Lösen Sie das Problem der blockierenden Positionierungs-DDL in MySQL 5.7
Im vorherigen Artikel „Änderungen der MySQL-Tabel...
Detaillierte Erklärung des Unterschieds zwischen Flex und Inline-Flex in CSS
inline-flex ist dasselbe wie inline-block. Es ist...
Lösung für „Keine solche Datei oder kein solches Verzeichnis“ im Gebietsschema nach der Installation von glibc-2.14 in CentOS6.5
Inhaltsverzeichnis 1. In die Grube fallen 2. Verg...
Verständnis und Anwendungsanalyse der pessimistischen und optimistischen Sperre von MySQL
In diesem Artikel werden die pessimistische und d...
Konfigurationsmethode für die Serverzeitsynchronisierung von Centos 7.4 [basierend auf dem NTP-Dienst]
Dieser Artikel beschreibt, wie man die Zeitsynchr...
Zusammenfassung wichtiger Breakpoint-Debugging-Techniken für JavaScript (empfohlen)
Inhaltsverzeichnis Warum einen Debugger verwenden...