vite, Evan You's innovatives Build-Tool, ist Framework-Agnostic, unterstützt Vue.js, react.js, svelte.js und einfaches JavaScript. Dieser Artikel über einen überblick auf Oberfl?chenebene und untersucht den Quellcode von Vite, um seine Vorlagen- und Plugin-Systeme zu verstehen. Wir werden die Unterscheidungen zwischen Vorlagen und Plugins klarstellen und untersuchen, wie Vite's Core mit Plugins interagiert.

Schlüsselkonzepte:

Die Unabh?ngigkeit von
• vite rahmen aus der Vorlage und der Plugin -Architektur und erm?glicht die Projektgenerierung in verschiedenen Frameworks.
• VITE -Nebel -Rollup für prim?re Bündelung und ESBuild für Modulkompatibilit?t und Optimierung, was zu einer au?ergew?hnlichen Geschwindigkeit führt.
• Erstellen eines vite -Projekts beinhaltet die Auswahl eines Projektnamens und der Vorlage mithilfe des create-vite -Tools. Framework-spezifische Vorlagen stützen sich auf entsprechende Plugins, die mit einer Hakenarchitektur erstellt wurden.

Erstellen einer Vue -App mit vite:

Erstellen wir ein Vue -Projekt:

npm init vite@latest

(mit @latest stellt sicher, dass Sie immer die neueste Version haben.) Verwenden Sie Alternativ die Kurzschrift:

npx create-vite

Dies startet create-vite und fordert Sie für einen Projektnamen und einen Projektnamen und eine Vorlage auf. W?hlen Sie einen Namen und w?hlen Sie entweder "Vanille" oder "Vue" als Vorlage.

Erforschung des vite Quellcodes:

Navigieren Sie zum Github -Repository von Vite (github.com/vitejs/vite) und untersuchen Sie das Verzeichnis packages. create-app (veraltet) und create-vite sind der Schlüssel. create-vite beherbergt die eingebauten Projektvorlagen. Sie finden auch Plugin-Verzeichnisse für integrierte Plugins.

Vorlagen vs. Plugins:

• Vorlagen: Startercode für neue Projekte. Sie befinden sich in packages/create-vite und bieten rahmenspezifische Dateistrukturen (z. B. template-vue, template-vanilla).

• Plugins: Aktivieren Sie den Vite -Rahmen Agnostizismus. Im Verzeichnis packages (z. B. plugin-vue, plugin-react) befinden sie sich um die rahmenspezifische Verarbeitung.

Vorlagen verwenden h?ufig Plugins. Zum Beispiel erfordert die VUE-Vorlage das @vitejs/plugin-vue -Plugin, um VUE-Einzelfilmkomponenten (SFCs) zu verarbeiten.

Vergleiche package.json Dateien für template-vanilla und template-vue zeigt diese Abh?ngigkeit:

template-vue enth?lt vue, @vitejs/plugin-vue und @vue/compiler-sfc, wobei die VUE -Unterstützung erm?glicht wird. @vitejs/plugin-vue fungiert als Brücke zwischen Vite's Core und Vue.js.

Das Vue -Plugin:

@vitejs/plugin-vue Griff Vue Project Bündelung und delegiert an Rollup über Haken. Diese Hooks definieren Punkte, an denen Plugin -Code ausgeführt wird.

Ein Ausschnitt aus packages/plugin-vue/src/index.ts zeigt Hook -Implementierungen:

npm init vite@latest

Vite's Core (z. B. packages/vite/src/node/build.ts) verwendet Rollup, wobei diese Plugins eingebaut werden.

rollup vs. Esbuild:

vite verwendet sowohl Rollup (Hauptbündelung) als auch ESBuild (Modultransformation und Optimierung-"Abh?ngigkeit Vorbündelung"). Esbuilds Geschwindigkeit in Go macht es ideal für diese leistungskritische Aufgabe.

Zusammenfassung:

Diese Erkundung zeigt die Architektur von Vite: create-vite verwaltet Vorlagen; Framework-spezifische Plugins, die ein hakenbasiertes System verwenden, integrieren Sie sich mit dem Vite-Kern über Rollup, wobei die modulische ESBUILD-Optimierung der Modulhandhabung ist. Diese Kombination liefert die Geschwindigkeit und Flexibilit?t von Vite.

h?ufig gestellte Fragen (FAQs):

(Die ursprünglichen FAQs sind bereits gut geschrieben und umfassend. Es sind keine ?nderungen erforderlich.)

Das obige ist der detaillierte Inhalt vonErforschen Sie Vite über seinen Quellcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!