Erste Schritte

Überblick

Vite (französisches Wort für "schnell", ausgesprochen [/vit/], wie "veet") ist eine neue Art von Frontend-Build-Tool, das die Erfahrung bei der Frontend-Entwicklung erheblich verbessert. Es besteht aus zwei Hauptbestandteilen:

• Einem Entwicklungsserver, der Ihre Quelldateien über native ES-Module, mit umfangreichen integrierten Funktionen und erstaunlich schnellem Hot Module Replacement (HMR) bereitstellt.

• Einem Build-Befehl, der Ihren Code mit Rollup bündelt und so vorkonfiguriert ist, dass er hochoptimierte statische Assets für die Produktion ausgibt.

Vite ist meinungsfreudig und wird mit vernünftigen Standardeinstellungen ausgeliefert. Lesen Sie im Features Guide nach, was alles möglich ist. Unterstützung für Frameworks oder Integration mit anderen Tools ist über Plugins möglich. Die Config Section erklärt, wie Sie Vite bei Bedarf an Ihr Projekt anpassen können.

Darüber hinaus ist Vite über seine Plugin-API und JavaScript-API mit vollständiger Typisierungsunterstützung in hohem Maße erweiterbar.

Mehr über die Beweggründe für das Projekt erfahren Sie im Abschnitt Warum Vite.

Browser-Unterstützung

Während der Entwicklung setzt Vite esnext als Transformationsziel, da wir davon ausgehen, dass ein moderner Browser verwendet wird, der alle aktuellen JavaScript- und CSS-Funktionen unterstützt. Dadurch wird eine Absenkung der Syntax verhindert, so dass Vite die Module so nah wie möglich am ursprünglichen Quellcode bereitstellen kann.

Für den Produktions-Build zielt Vite standardmäßig auf Browser ab, die native ES Module, native ESM dynamic import und import.meta unterstützen. Legacy-Browser können über das offizielle @vitejs/plugin-legacy unterstützt werden. Lesen Sie den Abschnitt Erstellung für die Produktion für weitere Details.

Vite online ausprobieren

Sie können Vite online auf StackBlitz ausprobieren. Es führt das Vite-basierte Build-Setup direkt im Browser aus, so dass es fast identisch mit dem lokalen Setup ist, aber keine Installation auf Ihrem Rechner erfordert. Sie können zu vite.new/{template} navigieren, um das zu verwendende Framework auszuwählen.

Folgende Vorlagen werden unterstützt:

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-ts

Scaffolding für Ihr erstes Vite Projekt

Kompatibilitätshinweis

Vite erfordert Node.js Version 18+ oder 20+. Einige Vorlagen benötigen jedoch eine höhere Node.js-Version, um zu funktionieren. Bitte aktualisieren Sie diese, wenn Ihr Paketmanager Sie davor warnt.

NPM

$ npm create vite@latest

Yarn

$ yarn create vite

PNPM

$ pnpm create vite

Bun

$ bun create vite

Folgen Sie dann den Anweisungen! Sie können auch direkt den Projektnamen und die zu verwendende Vorlage über zusätzliche Befehlszeilenoptionen angeben. Führen Sie zum Beispiel ein Vite + Vue-Projekt aus, um ein Gerüst zu erstellen:

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

# bun
bun create vite my-vue-app --template vue

Siehe create-vite für weitere Details zu jeder unterstützten Vorlage: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts.

Sie können . für den Projektnamen verwenden, um im aktuellen Verzeichnis ein Gerüst zu erstellen.

Community Vorlagen

create-vite ist ein Tool, mit dem man schnell ein Projekt aus einer Basisvorlage für gängige Frameworks erstellen kann. Bei Awesome Vite finden Sie von der Community gepflegte Vorlagen, die andere Tools enthalten oder auf andere Frameworks abzielen.

Für eine Vorlage unter https://github.com/user/project können Sie sie online unter https://github.stackblitz.com/user/project ausprobieren (indem Sie .stackblitz nach github zur URL des Projekts hinzufügen).

Sie können auch ein Tool wie degit verwenden, um Ihr Projekt mit einer der Vorlagen zu unterlegen. Angenommen, das Projekt befindet sich auf GitHub und verwendet main als Standardzweig, können Sie eine lokale Kopie erstellen:

npx degit user/project#main my-project
cd my-project

npm install
npm run dev

index.html und das Projekt-Root-Verzeichnis

Eine Sache, die Ihnen vielleicht aufgefallen ist, ist, dass in einem Vite-Projekt die Datei index.html an vorderster Stelle steht, anstatt in public versteckt zu sein. Das ist beabsichtigt: Während der Entwicklung ist Vite ein Server, und index.html ist der Einstiegspunkt zu Ihrer Anwendung.

Vite behandelt die index.html als Quellcode und Teil des Modulgraphen. Es löst <script type="module" src="..."> auf, das auf Ihren JavaScript-Quellcode verweist. Sogar inline <script type="module"> und CSS werden über <link href> referenziert und genießen damit Vite-spezifische Eigenschaften. Darüber hinaus werden URLs innerhalb von index.html automatisch umbasiert, so dass keine speziellen Platzhalter für %PUBLIC_URL% erforderlich sind.

Ähnlich wie bei statischen http-Servern gibt es bei Vite ein "Wurzelverzeichnis", von dem aus Ihre Dateien bereitgestellt werden. In der gesamten Dokumentation wird auf dieses Verzeichnis als <root> verwiesen. Absolute URLs in Ihrem Quellcode werden unter Verwendung des Projektstamms als Basis aufgelöst, so dass Sie Code schreiben können, als ob Sie mit einem normalen statischen Dateiserver arbeiten würden (nur viel leistungsfähiger!). Vite ist auch in der Lage, mit Abhängigkeiten umzugehen, die zu Orten außerhalb des Root-Dateisystems aufgelöst werden, was es sogar in einem Monorepo-basierten Setup nutzbar macht.

Vite unterstützt auch mehrseitige Anwendungen mit mehreren .html-Einstiegspunkten.

Alternative Root-Verzeichnisse spezifizieren

Das Ausführen von vite startet den Dev-Server unter Verwendung des aktuellen Arbeitsverzeichnisses als Root. Sie können ein alternatives Wurzelverzeichnis mit vite serve some/sub/dir angeben. Beachten Sie, dass Vite auch seine Konfigurationsdatei (d.h. vite.config.js) innerhalb des Projektstammes auflöst, so dass Sie diese verschieben müssen, wenn das Wurzelverzeichnis geändert wird.

Befehlszeilenschnittstelle (CLI)

In einem Projekt, in dem Vite installiert ist, können Sie das vite-Binary in Ihren npm-Skripten verwenden oder es direkt mit npx vite ausführen. Hier sind die standardmäßigen npm-Skripte in einem gerüsteten Vite-Projekt:

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

Sie können zusätzliche CLI-Optionen wie --port oder --open angeben. Eine vollständige Liste der CLI-Optionen erhalten Sie, wenn Sie npx vite --help in Ihrem Projekt ausführen.

Erfahren Sie mehr über die Befehlszeilenschnittstelle

Unveröffentlichte Commits verwenden

Wenn Sie nicht auf eine neue Version warten können, um die neuesten Funktionen zu testen, müssen Sie das vite repo auf Ihren lokalen Rechner klonen und es dann selbst bauen und verlinken (pnpm ist erforderlich):

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # use your preferred package manager for this step

Gehen Sie dann zu Ihrem Vite-basierten Projekt und führen Sie pnpm link --global vite aus (oder den Paketmanager, den Sie zum globalen Verlinken von vite verwendet haben). Starten Sie nun den Entwicklungsserver neu, um auf dem neuesten Stand zu sein!

Community

Wenn Sie Fragen haben oder Hilfe benötigen, wenden Sie sich an die Community unter Discord und GitHub Discussions.