Vite v4.0.4 wurde am 3. Januar 2023 veröffentlicht und erweitert die Funktionalitäten der Vite-Entwicklungsumgebung und kommt nur fünf Monate nach Vite 3. Die neue Version enthält neue Funktionen und Updates, die das JavaScript-Entwicklungserlebnis schneller und stärker als zuvor machen.
Hier werden wir besprechen, was Vite ist, welche wichtigen Funktionen und Updates in Vite 4 zu finden sind.
Was ist Vite?
Das Wort „vite“ selbst bedeutet „schnell“. Es ist ein Front-End-Build-Tool und ein Entwicklungsserver, der darauf ausgelegt ist, eine schnellere, leichtere und einfachere Entwicklungserfahrung zu bieten. Es bedient Ihren Code während der Entwicklung, bündelt Ihre Dateien für die Produktion und ermöglicht eine einfache Integration mit verschiedenen JavaScript-Frameworks und -Bibliotheken, wie Vue, React, Preact und Svelte.
Vit wurde in den letzten zwei Jahren zahlreichen Verbesserungen unterzogen, und Vite 4 bringt mehrere neue und verbesserte Funktionen.
1. Aufrollen 3
Aufrollen ist ein JavaScript-Modul-Bundler, mit dem Entwickler verschiedene bündeln können JavaScript-Module in eine einzige Datei. Dies wiederum verbessert die Leistung der Anwendung, indem die Anzahl der Anforderungen reduziert wird, die der Browser zum Laden des Codes stellen muss.
Vite verwendet jetzt Rollup 3 während der Erstellungszeit. Vite Version 3 verwendete Rollup 2, aber nach der Veröffentlichung von Rollup 3 im Oktober 2022 kam die neue Version von Vite mit einem größeren Upgrade auf Rollup 3.
Sie sollten vor dem Upgrade auf Rollup 3 den Rollup-Migrationsleitfaden lesen, da Probleme auftreten können, obwohl Rollup 3 größtenteils mit Rollup 2 kompatibel ist.
2. Neues React-Plugin mit Speedy Web Compiler (SWC)
SWC ist ein superschneller, in Rust geschriebener JavaScript-Compiler. SWC und Babel sind beides JavaScript-Compiler, die Ihren Code in das umwandeln, was von Browsern unterstützt wird, aber SWC hat behauptet, schneller als Babel zu sein.
Da Vite v3 Babel verwendet hat, kommt v4 mit der Einführung von SWC als Ersatz oder Alternative, insbesondere für React-Projekte.
Während Vite weiterhin Babel unterstützt, führt Vite 4 zwei Plugins (vitejs/plugin-react und vitejs/plugin-react-swc) mit unterschiedlichen Kompromissen für React-Projekte ein.
Das vitejs/plugin-react-Plugin
Dieses Plugin bietet schnellen Hot Module Replacement bei minimaler Paketgröße durch die Verwendung von esbuild und Babel. Es bietet auch die zusätzliche Flexibilität, die Babel-Transformationspipeline verwenden zu können.
Der Hot-Modulaustausch ermöglicht eine fette Auffrischung. Es ermöglicht Entwicklern, Module in einer laufenden Anwendung zu aktualisieren, ohne die gesamte Seite aktualisieren zu müssen. Folgen Sie der Demonstration unten, um das Plugin in Ihrem Projekt zu installieren.
npm install @vitejs/plugin-react
Befolgen Sie den folgenden Code, um das Plugin in Ihr Projekt zu importieren;
importieren {defineConfig} aus'vite'
importieren reagieren aus'@vitejs/plugin-react'
ExportStandard defineConfig({
Plugins: [reagieren()],
})
Das vitejs/plugin-react-swc-Plugin
Dies ist ein neues Plugin, das esbuild während des Builds und Speed Web Compiler während der Entwicklung verwendet.
Durch den Ersatz von Babel durch SWC zielt das Plugin darauf ab, den Entwicklungsprozess erheblich zu beschleunigen, insbesondere für Projekte, die keine nicht standardmäßigen React-Erweiterungen benötigen.
So installieren Sie das Plugin;
npm i @vitejs/plugin-react-swc
Importieren Sie es wie folgt in Ihr Projekt;
importieren {defineConfig} aus"vite";
importieren reagieren aus"@vitejs/plugin-react-swc";
ExportStandard defineConfig({
Plugins: [reagieren()],
});
3. CSS als String importieren
Diese Funktion bietet eine Lösung für das doppelte Ladeverhalten von Vite 3 CSS, das auftritt, wenn der Standardexport einer CSS-Datei importiert wird, z. B.:
importieren cssString aus'./global.cssUm dieses Verhalten zu verhindern, führt Vite 4 die Verwendung des Modifizierers ?inline query suffix ein. Hier ist eine Demonstration der Syntax;
importieren cssString aus'./global.css? im Einklang'Der v3-CSS-Standardexport ist daher veraltet.
4. Umgebungsvariablen
Vite hat seine Abhängigkeiten von dotenv und dotenv-expand aktualisiert. Die verwendeten neuen Versionen sind dotenv 16 bzw. dotenv-expand 9. Dieses Update erfordert, dass Sie Werte, die die Zeichen „#“ oder „`“ enthalten, in Anführungszeichen setzen, um eine ordnungsgemäße Funktionalität sicherzustellen. Hier ist ein Beispiel;
SECRET_HASH="etwas-mit-A-#-Hash"Um den Prozess der Aktualisierung von ENV-Dateien zu vereinfachen, hat Vite die Verwendung der dotenv-Befehlszeilenschnittstelle empfohlen. Dies ist ein optionales Plug-in, mit dem sichergestellt werden kann, dass ENV-Dateien auf verschiedenen Computern, Umgebungen oder Teammitgliedern konsistent sind. Es kann dazu beitragen, den Prozess der Aktualisierung von ENV-Dateien weniger mühsam zu gestalten.
Andere Upgrades, Korrekturen und Migration auf Vite v4.0.4
Vite hat weitere Tastenkombinationen für die Befehlszeilenschnittstelle hinzugefügt. Um eine Liste aller Verknüpfungen anzuzeigen, drücken Sie H während der Entwicklung.
Der moderne Browser-Build zielt jetzt auch standardmäßig auf Safari14 ab, um eine breitere ES2020-Kompatibilität zu erreichen. Es gibt Unterstützung für Patch-Pakete beim Vorbündeln von Abhängigkeiten, es gibt verbesserte Fehlermeldungen während SSR und vieles mehr.
