Vite-Tutorial

Vite ist ein modernes Frontend-Build-Tool, das darauf abzielt, durch die Nutzung der nativen ES-Modul-Unterstützung in modernen Browsern eine schnelle Entwicklungserfahrung zu bieten.

Vite besteht aus zwei Teilen:

• Entwicklungsserver:Basierend auf nativen ES-Modulen bietet er ultraschnelle Hot-Updates.

• Build-Befehl:Verwendet Rollup, um Code zu bündeln und optimierte statische Assets für die Produktion zu generieren.

Vite erfordert Node.js-Version 18+ oder 20+. Einige Vorlagen erfordern jedoch eine höhere Node-Version, um ordnungsgemäß zu funktionieren. Wenn dein Paketmanager eine Warnung ausgibt, aktualisiere bitte deine Node-Version.

Probleme traditioneller Build-Tools

Vor Vite verwendete die Frontend-Entwicklung typischerweise Build-Tools wie Webpack. Obwohl diese Tools leistungsstark sind, haben sie einige Probleme:

• Langsame Startgeschwindigkeit:Je größer das Projekt, desto länger die Startzeit, was die Entwicklungseffizienz beeinträchtigt.

• Langsame Hot-Updates:Jedes Mal, wenn Code geändert wird, muss das gesamte Projekt neu gebaut werden, was zu langsamen Hot-Updates führt.

• Komplexe Konfiguration:Tools wie Webpack haben eine komplexe Konfiguration und einen hohen Lernaufwand.

Das Aufkommen von Vite löst die Probleme traditioneller Build-Tools und bietet folgende Vorteile:

• Ultraschneller Start:Durch die Nutzung der nativen ES-Modul-Unterstützung des Browsers ist kein Bundling erforderlich, und der Start ist extrem schnell.

• Schnelle Hot-Updates:Es werden nur geänderte Module aktualisiert, der Anwendungszustand bleibt erhalten und die Entwicklungseffizienz wird verbessert.

• Umfangreiche Funktionen:Bietet sofort einsatzbereite Unterstützung für TypeScript, JSX, CSS usw.

• Hochgradig erweiterbar:Andere Tools und Frameworks lassen sich einfach über das Plugin-System integrieren.

Wie Vite funktioniert

Die Funktionsweise von Vite lässt sich in Entwicklungsmodus und Produktionsmodus unterteilen:

• Entwicklungsmodus:

  • Vite startet einen Entwicklungsserver und lädt Quellcode direkt, indem es die native Unterstützung des Browsers für ES-Module nutzt.

  • Wenn sich Code ändert, aktualisiert Vite nur die geänderten Module und benachrichtigt den Browser, Hot-Updates durchzuführen, wobei der Anwendungsstatus erhalten bleibt.

• Produktionsmodus:

  • Vite verwendet Rollup, um Code zu bündeln und optimierte statische Asset-Dateien zu generieren.

  • Diese Dateien können auf jedem statischen Dateiserver bereitgestellt werden.

Für Vite geeignete Szenarien

Vite eignet sich für verschiedene Projekte, insbesondere:

• Single-Page-Anwendungen (SPA):Zum Beispiel Vue- und React-Projekte.

• Statische Websites:Schnell Blogs, Dokumentationen usw. erstellen.

• Bibliotheksentwicklung:Nutze die Build-Funktionen von Vite, um Bibliotheken effizient zu entwickeln und zu bündeln.

Ein Vite-Projekt erstellen

Vite bietet mehrere Möglichkeiten, ein neues Projekt zu erstellen, die einfachste ist das Kommandozeilen-Tool.

Öffnen Sie ein Terminal oder Kommandozeilen-Tool und führen Sie den folgenden Befehl aus, um ein neues Vite-Projekt zu erstellen:

npm create vite@latest

Folgen Sie den Eingabeaufforderungen, um den Projektnamen einzugeben und eine Vorlage auszuwählen.

Vite bietet mehrere Vorlagen, darunter:

• vanilla:Einfaches JavaScript-Projekt

• vue:Vue.js-Projekt

• react:React-Projekt

• preact:Preact-Projekt

• lit:Lit-Projekt

• svelte:Svelte-Projekt

Nach der Auswahl einer Vorlage erstellt Vite automatisch das Projektverzeichnis und installiert die Abhängigkeiten. In diesem Kapitel haben wir das Vue-Framework gewählt.

Wenn Sie sich vorerst nicht entscheiden können, funktioniert es auch, einfach die Eingabetaste zu drücken. Die im Fenster ausgegebenen Informationen sind ähnlich wie folgt:

Ein mit Vite erstelltes Projekt enthält typischerweise die folgenden Dateien und Ordner:

• node_modules:Ordner zum Speichern von Projektabhängigkeiten.

• public:Ordner zum Speichern statischer Assets wie Bilder, Schriftarten usw.

• src:Ordner zum Speichern des Projektquellcodes.

  • main.js:Einstiegsdatei des Projekts.

  • App.vue:Wurzelkomponente des Vue-Projekts.

• index.html:Startseite des Projekts.

• package.json:Projektkonfigurationsdatei, die Projektinformationen, Abhängigkeiten und Skriptbefehle enthält.

• vite.config.js:Vite-Konfigurationsdatei, die zum Konfigurieren verschiedener Vite-Optionen verwendet wird.

Den Entwicklungsserver starten

In das Projektverzeichnis wechseln:

cd example-vite-test

Abhängigkeiten installieren:

npm install

npm run dev

Nach der Ausführung erscheint die folgende Information:

VITE v6.2.0  ready in 684 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

Vite startet einen lokalen Entwicklungsserver und gibt die Zugriffsadresse aus, zum Beispielhttp://localhost:5173, wobei der Port in vite.config.js konfiguriert und geändert werden kann.

Öffnen Sie den Browser und besuchen Sie die Adresse, um Ihr Vite-Projekt anzuzeigen.

Code ändern und Ergebnis anzeigen

Öffnen Sie die Datei src/App.vue, ändern Sie den Code und speichern Sie die Datei.

Sie werden feststellen, dass der Browser automatisch aktualisiert und das geänderte Ergebnis anzeigt.

Vite-Startprozess

Definiert in package.json:

"scripts": {
  "dev": "vite"
}

Führen Sienpm run devaus. Nach dem Befehl sucht npm nach der lokalen ausführbaren Datei node_modules/.bin/vite, ruft diese Datei auf und startet den Entwicklungsserver.

Kernschritte des Vite-Startprozesses:

1. Konfiguration lesen

   • Standardmäßig wird die Konfigurationsdatei des Stammverzeichnisses gelesenvite.config.jsodervite.config.ts。
   • Die Konfiguration umfasstroot、aliasPlugins, Port usw.

2. Abhängigkeiten auflösen

   • Scannensrc/main.js(odersrc/main.ts) als Einstiegsdatei.
   • Abhängigkeitsanalyse für ES-Module durchführen.
   • Für Importpfade (wie@/components/Hello.vue) Alias-Auflösung durchführen.

3. Den Entwicklungsserver starten

   • HTTP-Server erstellen, Standardport5173。
   • Hot Module Replacement (HMR)-Funktion bereitstellen.
   • Vue-Dateien, JS/TS, CSS usw. durch integrierte Vite-Plugins in vom Browser erkennbaren Code umwandeln.

Aufrufreihenfolge der Dateien (am Beispiel eines typischen Vue-3-Projekts)

npm run dev
    ↓
vite 命令执行
    ↓
读取 vite.config.js
    ↓
扫描入口文件 src/main.js / src/main.ts
    ↓
main.js 导入 App.vue 和 router/store 等
    ↓
App.vue -> template + script + style 分别由 Vite Vue 插件处理
    ↓
浏览器请求资源时，Vite 进行按需编译和模块缓存
    ↓
页面呈现，支持 HMR 热更新

Kernpunkte

• Einstiegsdatei：main.jsodermain.ts, der Startpunkt der Vue-Anwendung.
• Modulauflösung: Vite verwendetesbuildum JS/TS schnell zu verarbeiten und Vue-Single-File-Komponenten zu bearbeiten.
• Alias-Auflösung：@Entsprichtsrc/, invite.config.jsdurch dieresolve.aliaskonfiguriert.
• Hot-Updates: Beim Ändern von.vue-Dateien oder JS/TS-Dateien aktualisiert Vite Module lokal, ohne die gesamte Seite neu zu laden.

Gängige Funktionen von Vite

Vite bietet umfangreiche Funktionen, die Ihnen helfen, Frontend-Anwendungen effizienter zu entwickeln.

1. CSS-Präprozessoren verwenden

Vite unterstützt CSS-Präprozessoren wie Sass, Less und Stylus.

Um diese Präprozessoren zu verwenden, müssen Sie zuerst die entsprechenden Abhängigkeiten installieren:

Sass:

npm install -D sass

Less:

npm install -D less

Stylus:

npm install -D stylus

Nach der Installation können Sie den entsprechenden CSS-Präprozessor in Ihrem Projekt verwenden.

Zum Beispiel können Sie in einem Vue-Projekt<style lang="scss">verwenden, um Sass-Code zu schreiben.

2. TypeScript verwenden

Vite unterstützt das Schreiben von Code in TypeScript.

Um TypeScript zu verwenden, müssen Sie zuerst TypeScript installieren:

npm install -D typescript

Nach der Installation können Sie .js-Dateien in .ts-Dateien umbenennen und Code mit TypeScript-Syntax schreiben.

Vite kompiliert TypeScript-Code automatisch.

3. Statische Assets verwenden

Vite unterstützt die Verwendung statischer Assets wie Bilder, Schriftarten usw.

Wir können diese Ressourcen im public-Verzeichnis ablegen oder Import-Anweisungen verwenden, um Ressourcen zu importieren.

Wie verwendet man das public-Verzeichnis?

Lege das Bild logo.png in das public-Verzeichnis und verweise dann mit /logo.png in deinem Code auf das Bild.

4. Import-Anweisungen verwenden

5. Umgebungsvariablen verwenden

Vite unterstützt die Verwendung von Umgebungsvariablen, um verschiedene Umgebungen zu konfigurieren.

Du kannst eine.env-Datei verwenden, um Umgebungsvariablen zu definieren.

Erstellen Sie eine .env-Datei:

VITE_API_URL=https://api.example.com

Umgebungsvariablen im Code verwenden:

const apiUrl = import.meta.env.VITE_API_URL

6. Plugins verwenden

Vite verfügt über ein reichhaltiges Plugin-Ökosystem, das dir helfen kann, die Funktionalität von Vite zu erweitern.

Wir können Vite-Plugins verwenden, um Funktionen wie Code-Komprimierung, Bildoptimierung und Code-Analyse zu implementieren.

Installiere das Plugin:

npm install -D vite-plugin-xxx

Konfiguriere das Plugin:

Konfiguriere das Plugin in der Datei vite.config.js:

import xxx from 'vite-plugin-xxx'

export default {
  plugins: [
    xxx()
  ]
}

vite.config.js ist die zentrale Konfigurationsdatei für ein Vite-Projekt. Durch die Konfiguration von vite.config.js kannst du verschiedene Verhaltensweisen von Vite anpassen, wie den Dev-Server, Build-Optionen, Plugins usw.

Das Folgende ist ein Beispiel für eine vite.config.js-Konfiguration:

1. root
   Gibt das Projektstammverzeichnis an, das standardmäßig das aktuelle Arbeitsverzeichnis ist. Hier wird es festgelegt auf./src, was bedeutet, dass der Quellcode des Projekts in demsrcVerzeichnis abgelegt werden.

2. base
   Gibt den Basispfad des Projekts an, geeignet, wenn das Projekt unter einem Unterpfad bereitgestellt wird. Zum Beispiel, wenn das Projekt bereitgestellt wird unterhttps://example.com/my-app/, dann setze ihn auf/my-app/。

3. server
   Entwicklungsserver-Konfiguration:

   • port: Geben Sie die Portnummer des Entwicklungsservers an.

   • open: Ob der Browser beim Starten des Entwicklungsservers automatisch geöffnet werden soll.

   • proxy: Konfigurieren Sie den Proxy-Server, um Cross-Origin-Probleme zu lösen. Zum Beispiel Proxy-Anfragen beginnend mit/apiaufhttp://localhost:8080。

4. build
   Build-Konfiguration:

   • outDir: Geben Sie das Verzeichnis für die Build-Ausgabe an.

   • assetsDir: Geben Sie das Speicherverzeichnis für statische Assets (wie Bilder, Schriftarten) an.

   • sourcemap: Ob Sourcemap-Dateien zum Debuggen generiert werden sollen.

   • minify: Ob der Code minifiziert werden soll,terserist das Standard-Minifizierungstool.

   • rollupOptions: Konfigurieren Sie Rollup-Bündelungsoptionen wie externe Abhängigkeiten und Code-Splitting.

5. plugins
   Konfigurieren Sie Vite-Plugins. Hier wird das@vitejs/plugin-vuePlugin verwendet, um Vue-Projekte zu unterstützen.

6. resolve.alias
   Pfad-Aliase konfigurieren. Zum Beispiel:@aufsrcdas Verzeichnis für einfache Referenzierung im Code zuordnen.

7. css.preprocessorOptions
   CSS-Präprozessor-Optionen konfigurieren. Zum Beispiel SCSS-Variablendateien global injizieren.

8. envPrefix
   Konfigurieren Sie das Präfix für Umgebungsvariablen. Standardmäßig lädt Vite nur Umgebungsvariablen, die beginnen mitVITE_das Präfix.