Gerüstbau und Hot Refresh und Hot Loading

Dieses Mal bringe ich Ihnen Gerüste, Hot Refresh und Hot Loading. Was sind die Vorsichtsmaßnahmen für Gerüste, Hot Refresh und Hot Loading?

Webpack ist sehr leistungsstark und ein vernünftiges Gerüst kann uns viel mühsame und sinnlose Arbeit ersparen. Unter anderem verbessern Hot Refresh und Hot Loading die Entwicklungsgeschwindigkeit im Vergleich zur herkömmlichen Entwicklung erheblich.

Entdecken Sie den Unterschied zwischen Hot Refresh und Hot Loading vom Gerüst aus

Ich glaube, dass die meisten Vue-Entwickler mit Vue-CLI beginnen und viele Anfänger glücklich mit dem Vue-Projekt arbeiten Ich wage es nicht, die Konfiguration von vue-cli nach Belieben zu ändern (schließlich ist Webpack in der Tat sehr kompliziert und vue-cli hat auch viel Arbeit geleistet, um das Erlebnis für Anfänger zu optimieren).

Im Gegensatz dazu bietet React kein relativ robustes Gerüst (zumindest wird es von mir offensichtlich nicht gefunden, ich hoffe, Sie können mich aufklären). Soweit ich weiß, handelt es sich dabei um das Generator-React-Webpack von Yeoman, die Create-React-App von React und ein gutes React-Starter-Kit (Hot Loading und integriert viel Code, auf den viel verwiesen wird).
Als ich React lernte, entdeckte ich, dass die ersten beiden oben erwähnten React-Gerüste eine Hot-Refresh statt Hot-Loading bieten.

Einfache Unterscheidung zwischen Hot Loading und Hot Refresh:

Hot Refresh: Nachdem die Datei geändert wurde, wird die gesamte Seite aktualisiert, ohne dass der Status (z. B. Eingabe von) erhalten bleibt Inhalt) Eingabeformular), das einem Webpack entspricht und Ihnen hilft, F5 zum Aktualisieren zu drücken
Hot Loading: Nachdem die Datei geändert wurde, wird der geänderte Bereich mit minimalen Kosten geändert. Behalten Sie den Status so weit wie möglich bei, bevor Sie die Datei ändern (ändern Sie nach Eingabe des Eingabeinhalts den Code anderer Tags).

Obwohl beide das Entwicklungserlebnis im Vergleich zur herkömmlichen Entwicklung (manuelles F5) verbessern, sind beide die Die Lücke ist immer noch riesig, insbesondere wenn das Projekt komplexer wird. Wir müssen dieses Problem ein für alle Mal lösen (um mehr Zeit für die Entwicklung von Fehlern zu lassen).

Praktische Modifikation

Die Konfiguration von Grund auf ist ein weiterer Bereich, daher beginnen wir, Änderungen direkt von vue-cli aus vorzunehmen.

In den folgenden Schritten wird nur der Schlüssel als Inspirationsreferenz aufgeführt. Weitere Informationen finden Sie im endgültigen Github-Komplettprojekt.

1. Vue-bezogene Abhängigkeiten, Dateien usw. löschen. ; alles im gesamten scr Sie können die Abhängigkeit von

2. package.json löschen und den Babel-Loader Webpack-Dev-Server React-Hot-Loader (das Wichtigste) hinzufügen

3. package.json-Befehlszeileneinstellung „dev“: „webpack-dev-server --inline --progress --config build/webpack.dev.conf.js“

4. webpack.base .conf Das Hinzufügen von .jsx-Dateien muss von babel-loader verarbeitet werden. Konfigurationsoptionen:{plugins:['react-hot-loader/babel']}

5. .babelrc-Voreinstellungen werden hinzugefügt, um zu reagieren, unten Plugins hinzufügen:['react-hot-loader/babel']

6. Erstellen Sie main.js im src-Ordner (der Name sollte sein (im Einklang mit der vom Webpack konfigurierten Eintragsdatei)

import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader';
import App from './pages/App'; // 自己写吧
import './assets/css/reset.scss';
// Render the main component into the dom
ReactDOM.render(<App/>, document.getElementById('app'));
export default hot(module)(App); // 热加载的关键

An diesem Punkt können wir gerne reagieren, um das Vergnügen des Heißladens zu erleben~

Das Problem

Tatsächlich ist es einfach, die Datei main.js in vue-cli zu ändern, um reaktionsbezogenen Code zu erhalten (vergessen Sie nicht, Babel für die Verarbeitung von jsx zu konfigurieren) und trotzdem Hot Refresh zu verwenden.

Nachdem ich den lokalen Code beobachtet und verglichen hatte, fand ich einen attraktiven Namen:

In der Datei webpack.dev.conf:

new webpack.HotModuleReplacementPlugin()

Nach einer Online-Suche habe ich Folgendes erfahren Der Schlüssel zum Erreichen eines Hot-Loadings besteht darin, dass der Code selbst modular sein muss (was bedeutet, dass jedes Framework, das wiederverwendbare Komponenten wie die drei Hauptframeworks schreiben kann, diese Eigenschaft nutzen kann), sodass ein Hot-Loading durch Plug-In und erreicht werden kann Entfernen des Codes.

Die jsx-Spezialeffekte von React können von HotModuleReplacementPlugin nicht verarbeitet werden und können nur im laufenden Betrieb aktualisiert werden.

In diesem Fall steht React-Hot-Loader kurz vor der Veröffentlichung. Gemäß der offiziellen Nutzungsmethode können Sie das Hot-Reloading weiterhin verwenden.

ps: Nur als Referenz, ich erforsche und lerne immer noch viele Reaktionscodes

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Themen im Artikel zur chinesischen PHP-Website!

Empfohlene Lektüre:

302-Statuscode in Axios

Kapseln Sie den Vue2-Routing-Navigations-Hook und verwenden Sie ihn im tatsächlichen Kampf

Das obige ist der detaillierte Inhalt vonGerüstbau und Hot Refresh und Hot Loading. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!