Detaillierte Erklärung der Lösung zur Migration von Antd+React-Projekten nach Vite
|
Antd+React+Webpack ist häufig die Standardkombination von Front-End-Projekten, die auf dem React-Technologie-Stack basieren. Alle drei verfügen über ausgereifte Ökosysteme und eine stabile Leistung. Angesichts der kontinuierlichen Innovation der Front-End-Technologie und der Veröffentlichung von Vite2, der sogenannten Build-Plattform der nächsten Generation, scheint Webpack jedoch nicht so beliebt zu sein. Warum sage ich das? Weil Vite zu schnell ist. Nach einer Phase des Experimentierens habe ich mich dazu entschlossen, webpack im Projekt durch vite zu ersetzen und habe daher diesen Artikel geschrieben, um ihn mit Ihnen zu teilen. Was ist ViteAls Protagonist dieses Artikels möchte ich zunächst kurz das Build-Tool Vite vorstellen. Dieses Tool ist das von You Yuxi eingeführte [Front-End-Entwicklungs- und Build-Tool der nächsten Generation]. Vite ist eigentlich kein neues Tool. Bereits vor über einem Jahr wurden viele Versionen eingeführt. Bis zur Einführung der Version 2.x sorgte sie im Front-End-Kreis für ausreichend Aufsehen und zeugte von der Reife und Leistungsfähigkeit von Vite. Ich habe nicht vor, Vite hier im Detail vorzustellen. Weitere Informationen finden Sie auf der offiziellen Website https://cn.vitejs.dev/. MigrationsprozessNachdem wir uns mit dem Vite-Tool vertraut gemacht haben, können wir mit der Vorbereitung der Migration beginnen. 1. Installieren Sie vite-Abhängigkeitennpm ich vite antd-vite-import-plugin @vitejs/plugin-react-refresh vite-plugin-html -D 2. Aktualisieren Sie die ursprünglichen Abhängigkeiten des ProjektsHier verwendet unser Projekt dva+antd3.x als grundlegendes Entwicklungsframework. Hier habe ich die wichtigsten Abhängigkeiten des Systems auf die neueste Version aktualisiert. Beispielsweise verwende ich dva Version 2.6.0-beta.22. Andere verwandte Abhängigkeiten wie react, react-dom, react-router-dom und @babel/plugin-transform-runtime wurden aktualisiert (antd ist immer noch Version 3.x und wurde noch nicht auf die Version 4.x aktualisiert). Dies hängt von Ihren tatsächlichen Anforderungen ab; 3. Fügen Sie die Konfigurationsdatei vite.config.js zum Stammverzeichnis des Projekts hinzuIm Vergleich zur Konfigurationsdatei von webpack ist vite viel einfacher und bietet viele integrierte Funktionen, z. B. die Verarbeitung statischer Ressourcen. Auch die Funktionsaktivierung ist relativ einfach und wie folgt:
importiere { defineConfig } von 'vite';
importiere vitePluginHtml aus „vite-plugin-html“;
importiere reactRefresh von „@vitejs/plugin-react-refresh“;
exportiere Standard-DefineConfig({
css: {
Präprozessoroptionen: {
weniger: {
javascriptEnabled: true,
},
}
},
öffentliches Verzeichnis: './src/configs',
Plugins: [
reagierenRefresh(),
antdViteImportPlugin(),
vitePluginHtml({
minify: wahr,
injizieren: {
injizierenDaten: {
Titel: „vite-react-Beispiel“,
injectScript: '<script src="/configs.js"></script>', // publicDir als Stammverzeichnis},
Injektionsoptionen: {
Dateiname: './index.html', // Vorlagenseite}
},
}),
],
Server: {
offen: wahr,
Port: 10010,
}
});
Hier verwenden wir das Plugin vite-plugin-html als Alternative zum html-webpack-plugin. Achten Sie auf die Optionen injectData und injectOptions. injectData kann problemlos benutzerdefinierte Daten in unsere Vorlagenseite einfügen und injectOptions kann die Vorlagenseite angeben. Weitere Konfigurationselemente finden Sie unter https://www.npmjs.com/package/vite-plugin-html. Die Seite index.html muss entsprechend angepasst werden:
<!DOCTYPE html>
<Kopf>
<meta charset="utf-8">
<Titel><%- Titel %></Titel>
......
</Kopf>
<Text>
<div id="app"></div>
<Skript>
var global = globalThis || window; // Startfehler verhindern</script>
<%- injectScript %>
<script Typ="Modul" src="/src/index.jsx"></script>
</body>
</html>Der Unterschied zu webpack besteht darin, dass wir hier die Eintragsdatei manuell angeben müssen und der Skript-Tag-Typ ein Modul ist. 4. Ändern Sie das DateisuffixDie Dateien hier sind React-Komponenten mit dem Suffix „js“. Unter der Webpack-Konstruktionsplattform sind „js(x)“ und „ts(x)“ in Ordnung, aber wenn Sie vite verwenden, sollten Sie am besten Dateien mit den Suffixen „ts“, „jsx“ oder „tsx“ verwenden. Zu diesem Problem können Sie sich auf dieses Problem beziehen: https://github.com/vitejs/vite/issues/1552. Schließlich beschwerte sich der Autor, dass es so schwierig sei, das Suffix stapelweise zu ändern. Vergessen Sie es, ändern Sie es einfach. Wenn Sie es mühsam finden, es manuell zu ändern, ist es nicht schwierig, ein Skript zu schreiben. 5. Startskript hinzufügen
"Skripte": {
"Entwickler": "vite",
"Build": "vite-Build",
......
}
Das sollte es eigentlich gewesen sein, aber die Dinge laufen nicht so reibungslos. Das Projekt kann nicht einmal ausgeführt werden. Nun, nichts läuft so reibungslos. Als Nächstes schauen wir uns die Probleme an, auf die wir gestoßen sind. Aufgetretene Probleme 1. Dekoratoren werden nicht unterstütztIm Geschäftscode verwenden wir die von dva bereitgestellte Verbindung, um den Status wie folgt zu binden:
@connect(Zustand => Zustand.foo)
Klasse Foo erweitert React.PureComponent {
....
}
Die Dekorator-Syntax wird von Vite jedoch nicht unterstützt. Zu diesem Problem gibt es ein Problem: https://github.com/vitejs/vite/issues/2349. Derzeit gibt es keine gute Lösung, daher müssen wir Dekoratoren entfernen und stattdessen die reguläre Funktionsbindung verwenden. 2.antd Unbekannter Thementyp: undefiniert, Name: undefiniertUnser Projekt verwendet derzeit Version 3.x von Antd. Dieser Fehler ist beim Start aufgetreten. Tatsächlich liegt es hauptsächlich daran, dass die Datei antd/es/icon/index.js geladen wird, wenn die Antd-Komponente initialisiert wird:
importiere * als alle Symbole aus „@ant-design/icons/lib/dist“;
......
ReactIcon.add.apply(ReactIcon, _toConsumableArray(Object.keys(allIcons).map(Funktion (Schlüssel) {
gib alle Symbole [Schlüssel] zurück;
})));
......
Das von „@ant-design/icons/lib/dist“ exportierte Objekt ist { default: {...} }. Die korrekte Zugriffsform ist allIcons.default, nicht allIcons. Daher kann das korrekte Exportobjekt des Symbols nicht abgerufen werden. Dieses Problem können Sie unter folgendem Problem sehen: https://github.com/ant-design/ant-design/issues/19002. Ein Punkt, der hier zu beachten ist, ist, dass die Version antd4.x nicht angezeigt wird, für unser Projekt wird sie jedoch derzeit nicht auf die 4. Hauptversion aktualisiert. Wie lässt sich das also lösen? Tatsächlich wird es kein solches Problem geben, solange auf die Komponenten unter antd/lib verwiesen wird. Wir können antd/lib/icon/index.js sehen:
......
var allIcons = _interopRequireWildcard(require("@ant-design/icons/lib/dist"));
Funktion _InteropRequirewildCard (obj) {if (obj & amp; & amp; obj .__ Esmodule) {return obj; Ardcache (); j, key) {var desc = haSPropertyDescriptor? (Cache) {Cache.set (OBJ, Newobj);
......
Hier hilft uns die Methode _interopRequireWildcard, das Exportproblem zu lösen. Wäre es also nicht besser, wenn wir die Konfiguration von babel-plugin-import ändern würden? Nun, so einfach ist das nicht. Vite unterstützt babel-plugin-import nicht sehr gut. Zuerst werde ich in den Problemen von Vite danach suchen. Dort gibt es eine ähnliche Frage: https://github.com/vitejs/vite/issues/1389. Ich habe sie mir angesehen und festgestellt, dass sie mein Problem nicht löst. Die verschiedenen darin erwähnten Plug-ins haben mir einige Ideen gegeben. Ich werde ein Vite-Plug-in schreiben, das unseren Anforderungen entspricht. Die Idee des Plug-Ins ist sehr einfach: Sie besteht darin, die Art und Weise, wie Antd-Komponenten eingeführt werden, einheitlich zu ändern:
---Vor der Änderung---
importiere { Button } von 'antd';
---Nach der Änderung--- Button aus „antd/lib/button“ importieren; importiere „antd/lib/button/style/index.css“; Was hier erklärt werden muss, ist die Einführung von CSS-Stilen. Wenn style/index oder style/css eingeführt wird, tritt das Problem „require is not defined“ auf, da require in diesen beiden js-Dateien verwendet wird, vite jedoch während der Vorkompilierung keine Knotenumgebung ist, sodass natürlich ein Fehler gemeldet wird. 3.'default' wird nicht exportiertManchmal können beim Laden von Abhängigkeiten von Drittanbietern Fehler auftreten, z. B. „Standard“ wird nicht exportiert usw. Weitere Informationen finden Sie unter https://github.com/vitejs/vite/issues/2679. Im eigentlichen Entwicklungsprozess ist es unvermeidlich, auf seltsame Probleme zu stoßen. Das ist der Preis dafür, neue Dinge auszuprobieren. Geschwindigkeitsrennen Einer der Vorteile von vite ist, dass es schnell ist. Wie groß ist also der Unterschied zu webpack? Hier verwenden wir webpack und vite, um jeweils dasselbe lokale Projekt zu starten:
Dies ist nur ein grober Vergleich. Den Daten zufolge ergibt sich ein zehnfacher Unterschied. Allein in Bezug auf die Geschwindigkeit ist Vite sehr schnell. Laut der Erklärung auf der offiziellen Website wird Vite esbuild verwenden, um Abhängigkeiten vorab zu erstellen. Esbuild ist in Go geschrieben und kann Abhängigkeiten 10-100 Mal schneller erstellen als in JavaScript geschriebene Bundler. endlichNach einigen Schwierigkeiten bin ich der Meinung, dass vite2 nicht ausgereift ist und in einigen kleinen Projekten ausprobiert werden kann. Ich habe mich entschieden, zuerst Webpack zu verwenden. Schließlich hat sich Webpack im Laufe der Jahre weiterentwickelt und weist nur wenige Fallstricke auf, während Vite für React noch nicht perfekt ist. Dies ist das Ende dieses Artikels über die Lösung zur Migration von Antd+React-Projekten zu Vite. Weitere relevante Inhalte zur Migration von Antd React zu Vite finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Stellen Sie die Nginx+Flask+Mongo-Anwendung mit Docker bereit
>>: Analyse der Anweisungsausführungsreihenfolge von SQL und MySQL
Artikel empfehlen
SQL GROUP BY ausführliche Erklärung und einfaches Beispiel
Die GROUP BY-Anweisung wird in Verbindung mit der...
Grundlegende Anwendungsbeispiele für benannte Slots in Vue
Vorwort Benannte Slots werden mithilfe des Attrib...
Installation, Konfiguration und Deinstallation von MySQL 8.0 in einer Windows-Umgebung
Softwareversion Windows: Windows 10 MySQL: mysql-...
Native JavaScript-Implementierung des Fortschrittsbalkens
Der spezifische Code für JavaScript zur Implement...
So zeigen Sie laufende Hintergrundprogramme in Linux an und beenden sie
Linux-Taskverwaltung - Ausführung und Beendigung ...
Detaillierte Erläuterung des Bereitstellungsprozesses von Docker Alibaba Cloud RocketMQ 4.5.1
Suchspiegel Docker-Suche Rocketmq Bildversion anz...
Wie werden Leerzeichen in HTML dargestellt (was bedeuten sie)?
Bei der Webentwicklung stößt man häufig auf Zeiche...
So verbergen Sie die Versionsnummer in Nginx
Nginx verbirgt die Versionsnummer In einer Produk...
Methode zum Erstellen eines Redis-Clusters basierend auf Docker
Laden Sie das Redis-Image herunter Docker-Pull yy...
Lösen Sie das Problem, dass das Element DateTimePicker+vue Popup-Box nur Stunden anzeigt
Drei Wissenspunkte: 1. CSS-Nachkommenselektor htt...
Detaillierte Erklärung zum schnellen Betrieb einer MySQL-Datenbank in einer Node.js-Umgebung
GitHub-Adresse: https://github.com/dmhsq/dmhsq-my...
Grundlegende Ideen zum Auffinden von Fehlern in der Web-Frontend-Entwicklung
Die WEB-Entwicklung besteht hauptsächlich aus zwe...
Austausch von Ideen zur Verarbeitung von Millionen von Daten in einer einzigen MySQL-Tabelle
Inhaltsverzeichnis Projekthintergrund Verbesserun...
Zusammenfassung der Dockerfile-Maven-Plugin-Nutzungsanleitung
Inhaltsverzeichnis POM-Konfiguration Setting.xml-...
JavaScript-Timer zum nahtlosen Scrollen von Bildern
In diesem Artikel wird der spezifische JavaScript...