Erste Schritte mit Vite: Das ultimative Build-Tool

Da Webanwendungen immer funktionsreicher werden, wächst die Nachfrage nach schnellen und effizienten Build-Tools weiter.

Vite ist ein modernes Build-Tool, das einen blitzschnellen Entwicklungsserver und einen optimierten Build-Prozess bietet, mit dem Benutzer ihren Arbeitsablauf optimieren und das Endbenutzererlebnis verbessern können.

Sie erfahren, wie Sie mit Vite beginnen, und behandeln den Installationsprozess, wesentliche Funktionen und Befehle der Befehlszeilenschnittstelle (CLI).

Initialisieren Sie ein Vite-Projekt

Bevor Sie verwenden können Vit, müssen Sie installieren Node.js und Node Package Manager auf Ihrem System. Nach der Installation dieser beiden Pakete können Sie mit der Erstellung eines Projekts mit Vite fortfahren.

So initialisieren Sie ein Projekt mit Vite mit npm:

npm init vite

Wenn Sie diesen Befehl ausführen, wird ein neues Vite-Projekt in Ihrem aktuellen Arbeitsverzeichnis erstellt. Der Befehl fordert Sie auf, grundlegende Konfigurationsentscheidungen zu treffen, um Ihr neues Vite-Projekt einzurichten.

Hier ist eine Aufschlüsselung der Optionen, zu deren Auswahl der Befehl Sie auffordert:

1. Name des Projekts. Wenn Sie den Befehl ausführen, werden Sie aufgefordert, einen Namen für Ihr neues Projekt anzugeben. Der von Ihnen angegebene Name wird auch in der angezeigt Paket.json Datei und dienen als Name Ihres Projektverzeichnisses.
2. Wählen Sie einen Rahmen aus. Diese Eingabeaufforderung fordert Sie auf, ein Framework für Ihr Projekt auszuwählen. Vite unterstützt derzeit beliebte Front-End-Frameworks wie React, Vue, Angular und eine Vanilla-Option für einfachen JavaScript-Code.
3. Wählen Sie eine Variante. Dies fordert Sie auf, eine Variante für Ihr Projekt auszuwählen, die Alternativen wie JavaScript und abdeckt seine Teilmenge der Sprache TypeScript.

Nachdem Sie die erforderlichen Informationen angegeben haben, erstellt Vite eine neue Projektstruktur in Ihrem aktuellen Arbeitsverzeichnis. Die Struktur stellt einen grundlegenden Projektaufbau dar, einschließlich a Paket.json Datei A Quelle Verzeichnis mit einem index.html Und main.js Datei und eine öffentlich Verzeichnis.

Nach dem Erstellen der Projektstruktur können Sie durch Ausführen zum Projektverzeichnis navigieren CD . Sobald Sie dies getan haben, installieren Sie alle zusätzlichen Abhängigkeiten, die Ihr Projekt möglicherweise benötigt, mit der npm installieren Befehl.

Um einen Entwicklungsserver zu starten und alle an Ihrem Projekt vorgenommenen Änderungen zu überwachen, führen Sie die npm laufen dev Befehl in Ihrem Projektterminal.

Funktionen von Vite

Die Funktionen von Vite konzentrieren sich auf die Rationalisierung des Build-Prozesses und die Verbesserung des Web-Build-Erlebnisses.

Rapid-Development-Server

Der Entwicklungsserver von Vite verwendet native ES-Module und verzögertes Laden von Modulen, was eine unglaubliche Geschwindigkeit ermöglicht. Dies ermöglicht schnelle Rückkopplungsschleifen und blitzschnelle Startzeiten.

Optimierter Build-Prozess

Vite hat sein Build-Verfahren verbessert, um produktionsbereiten, optimierten und minimierten Code zu produzieren. Außerdem wird eine Manifestdatei erstellt, die Bust- und Versions-Assets zwischenspeichern kann.

Unterstützung für verschiedene Front-End-Frameworks

Vite unterstützt verschiedene Front-End-Frameworks, einschließlich Vue und ähnliche Frameworks wie React Js und Angular Js. Dadurch können Entwickler ihr bevorzugtes Framework auswählen und die leistungsstarken Funktionen von Vite nutzen.

Hot Module Replacement (HMR)

Die Hot Module Replacement (HMR)-Funktion von Vite ermöglicht schnelle und nahtlose Aktualisierungen der Anwendung, ohne dass eine vollständige Seitenaktualisierung erforderlich ist. Das macht den Entwicklungsprozess schneller und effizienter.

CSS-Vorverarbeitung und PostCSS-Integration

Vite unterstützt die CSS-Vorverarbeitung, einschließlich Sass, Less und Stylus. Es lässt sich auch in PostCSS integrieren, was zusätzliche Transformationen und Optimierungen des CSS ermöglicht.

Vite bietet viele weitere Funktionen, einschließlich Unterstützung für TypeScript, JSX und WebAssembly. Mit der Veröffentlichung von Vite v4.0.4, ist die Entwickler-Community von Vite gewachsen und hat die Software aktiv gewartet und regelmäßig neue Funktionen hinzugefügt.

Die Befehlszeilenschnittstelle (CLI) von Vite

Die Befehlszeilenschnittstelle (CLI) von Vite ist ein praktisches Tool zum Anpassen des Verhaltens von Vite. Es bietet eine Reihe grundlegender Befehle, die auch dazu beitragen, den Entwicklungsprozess zu rationalisieren. Hier sind einige der wichtigsten CLI-Befehle:

vite bauen

Dieser Befehl erstellt die Anwendung für eine Produktionsumgebung und optimiert und minimiert den Code, damit er bereit für die Bereitstellung ist. Mit diesem Befehl können Sie sicherstellen, dass Ihre Anwendung so schnell und effektiv wie möglich ist und für die Verteilung an Ihre Benutzer bereit ist.

Vite-Vorschau

Mit diesem Befehl können Sie eine Vorschau des generierten Codes anzeigen, bevor Sie ihn in der Produktion bereitstellen. Wenn Sie sicherstellen möchten, dass alles wie erwartet aussieht und funktioniert und keine offensichtlichen Probleme oder Probleme vorliegen, die Ihrer Aufmerksamkeit bedürfen, ist dies ein hilfreicher Befehl zum Ausführen.

vite optimieren

vite optimieren ist in Vite 2.6 und höheren Versionen verfügbar, die Projektcode analysieren und optimierte Produktions-Builds generieren, indem sie Tree ausführen Shaking, Code-Splitting-Vorgänge und das Einbetten kleiner Assets direkt in den endgültigen Build, um die zum Laden der erforderlichen Anforderungen zu reduzieren App.

vite optimieren automatisch während ausgeführt vite bauen Befehl, der optimierte Produktions-Builds generiert. Sie können es auch separat ausführen, um die Build-Größe und Leistung zu überprüfen

Vites Konfigurationsdatei

In Vite definiert die Konfigurationsdatei verschiedene Optionen für den Erstellungsprozess. Die Vite-Konfigurationsdatei verwendet JavaScript und die ES6-Modulsyntax.

Standardmäßig sollten Sie Ihre Konfigurationsdatei benennen vite.config.js und legen Sie es im Stammverzeichnis des Projekts ab.

Hier sind einige der am häufigsten verwendeten Optionen in der Vite-Konfigurationsdatei:

• Wurzel. Gibt das Stammverzeichnis des Projekts an.
• Server. Konfiguriert den Entwicklungsserver. Es enthält Optionen zum Konfigurieren von Host-, Port- und Proxy-Anforderungen an ein API-Backend.
• Plugins. Ermöglicht das Hinzufügen von Plugins zum Vite-Erstellungsprozess. Ein Plug-in ist eine Funktion, die den Build-Prozess in irgendeiner Weise modifiziert, z. B. Unterstützung für ein neues Dateiformat hinzufügt oder Quellcode umwandelt.
• beschließen. Dies konfiguriert, wie Vite Importe im Projekt auflöst. Es enthält Optionen zum Angeben von Aliasen, Erweiterungen und Modulverzeichnissen.

Hier ist ein Beispiel für eine Vite-Konfigurationsdatei:

importieren {defineConfig} aus'vite';
importieren Weg aus'Weg';
ExportStandard defineConfig({
 Server: {
 Hafen: 3000,
 offen: WAHR,
 },
 beschließen: {
 alias: {
'@': path.resolve (__dirname, './src'),
 },
 },
 Plugins: [],
});

Diese Konfigurationsdatei richtet ein einfaches Vite-Projekt ein mit:

• ein lokaler Entwicklungsserver, der auf port läuft 3000
• ein Pseudonym für die Quelle Verzeichnis
• keine Plugins

Vite hat eine starke Community

Mehrere Online-Ressourcen erklären ausführlich, wie man Vite mit gängigen Frameworks wie React, Vue und Angular verwendet.

Darüber hinaus gibt es in der offiziellen Dokumentation eine Fülle von Informationen zur effektiven Verwendung von Vite. Mit diesen verfügbaren Ressourcen ist die Integration von Vite in Ihr nächstes Projekt möglich.