Erforschen Sie Vite über seinen Quellcode

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:

<code class="language-bash">npm init vite@latest</code>

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

<code class="language-bash">npx create-vite</code>

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:

<code class="language-bash">npm init vite@latest</code>

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!