Erste Schritte

Überblick

Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

• Ein Dev -Server, der umfangreiche Feature -Verbesserungen gegenüber nativen ES -Modulen bietet, beispielsweise extrem schneller Hot -Modul -Austausch (HMR) .

• Ein Build-Befehl, der Ihren Code mit Rollup bündelt, das vorkonfiguriert ist, um hoch optimierte statische Vermögenswerte für die Produktion auszugeben.

Vite ist eins Meinung und verfügt über sinnvolle Standardeinstellungen aus dem Box. Lesen Sie, was im Features Guide möglich ist. Die Unterstützung für Frameworks oder Integration mit anderen Tools ist durch Plugins möglich. Der Konfigurationsabschnitt erläutert, wie Sie bei Bedarf vite an Ihr Projekt anpassen.

Vite ist auch über seine Plugin -API und JavaScript -API mit vollem Schreibunterstützung hoch erweiterbar.

Sie können mehr über die Begründung des Projekts im Abschnitt "Why Vite" erfahren.

Browserunterstützung

Während der Entwicklung setzt Vite esnext als Transformation Ziel , da wir annehmen, dass ein moderner Browser verwendet wird und alle neuesten JavaScript- und CSS -Funktionen unterstützt. Dies verhindert die Absenkung der Syntax und lässt VITE -Module so nah wie möglich am ursprünglichen Quellcode servieren.

Für den Produktionsaufbau zielt standardmäßig VITE -Ziele, die moderne JavaScript unterstützen, wie native ES -Module , natives ESM -Dynamikimport , import.meta , Nullish Coalscing und Bigint . Legacy-Browser können über den offiziellen @vitejs/Plugin-Legacy unterstützt werden. Weitere Informationen finden Sie im Bereich "Gebäude" für Produktionsabschnitt .

Vite Online Versuchen

Sie können Vite online auf Stackblitz ausprobieren. Es wird das vite-basierte Build-Setup direkt im Browser ausgeführt, sodass es fast identisch mit dem lokalen Setup ist, aber keine Installation auf Ihrem Computer erfordert. Sie können zu vite.new/{template} navigieren, um auszuwählen, welches Framework verwendet werden soll.

Die unterstützten Vorlage sind vorhanden:

JavaScript	Typoskript
Vanille	Vanille-ts
Vue	VUE-TS
reagieren	React-ts
Vorwirkung	Preact-Ts
beleuchtet	Lit-Ts
Sufle	Sufle-ts
solide	Solid-Ts
Qwik	Qwik-ts

Gerüste Ihr Erstes Vite -Projekt

Compatibility Note

VITE benötigt Node.js Version 18+ oder 20+. Einige Vorlagen erfordern jedoch eine höhere Node.js -Version, um zu funktionieren. Bitte upgraden Sie, wenn Ihr Paketmanager davor warnt.

npm

$ npm create vite@latest

Yarn

$ yarn create vite

pnpm

$ pnpm create vite

Bun

$ bun create vite

Dann folgen Sie den Eingabeaufforderungen!

Sie können auch den Projektnamen und die Vorlage, die Sie über zusätzliche Befehlszeilenoptionen verwenden möchten, auch direkt angeben. Um zum Beispiel ein VITE + VUE -Projekt zu sammeln, rennen Sie:

npm

# NPM 7+, extra doppelstich erforderlich:
$ 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

Weitere Informationen zu jeder unterstützten Vorlage finden Sie unter : 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 zum Gerüst im aktuellen Verzeichnis verwenden.

Gemeinschaftsvorlagen

Create-Vite ist ein Tool, um ein Projekt schnell aus einer grundlegenden Vorlage für beliebte Frameworks zu starten. Schauen Sie sich Awesome Vite für gepflegte Vorlagen für Community -gepflegtes an, die andere Tools enthalten oder verschiedene Frameworks abzielen.

Für eine Vorlage von https://github.com/user/project können Sie sie online mit https://github.stackblitz.com/user/project probieren ( .stackblitz nach github zur URL des Projekts hinzuzufügen).

Sie können auch ein Tool wie Degit verwenden, um Ihr Projekt mit einem der Vorlagen zu senken. Unter der Annahme, dass das Projekt auf GitHub liegt und main als Standardzweig verwendet, können Sie eine lokale Kopie mit:

npx degit user/project#Haupt-My-Project
cd my-project

npm install
npm run dev

Manuelle Installation

In Ihrem Projekt können Sie die vite CLI verwenden, indem Sie:

npm

$ npm install -D vite

Yarn

$ yarn add -D vite

pnpm

$ pnpm add -D vite

Bun

$ bun add -D vite

Und erstellen Sie eine index.html -Datei wie diese:

<p>Hello Vite!</p>

Führen Sie dann den entsprechenden CLI -Befehl in Ihrem Terminal aus:

npm

$ npx vite

Yarn

$ yarn vite

pnpm

$ pnpm vite

Bun

$ bunx vite

Die index.html wird auf http://localhost:5173 serviert.

index.html und Projektwurzel

Eine Sache, die Sie vielleicht bemerkt haben, ist, dass in einem vite-Projekt index.html vorne und zentral ist, anstatt innerhalb von public wegzustücken. Dies ist beabsichtigt: Während der Entwicklung ist VITE ein Server und index.html ist der Einstiegspunkt für Ihre Anwendung.

Vite behandelt index.html als Quellcode und Teil des Moduldiagramms. Es wird <script type="module" src="..."> gelöst, die Ihren JavaScript -Quellcode verweist. Auch Inline <script type="module"> und CSS, auf die über <link href> verwiesen wird, genießen auch vite-spezifische Funktionen. Darüber hinaus werden URLs in index.html automatisch wiederhergestellt, sodass keine besonderen %PUBLIC_URL% Platzhalter erforderlich sind.

Ähnlich wie bei statischen HTTP -Servern hat Vite das Konzept eines "Root -Verzeichnisses", aus dem Ihre Dateien bedient werden. Sie sehen, dass es im Rest der Dokumente als <root> bezeichnet wird. Absolute URLs in Ihrem Quellcode werden mit dem Projektroot als Basis behoben, sodass Sie Code schreiben können, als würden Sie mit einem normalen statischen Dateiserver arbeiten (außer viel leistungsfähiger!). VITE ist auch in der Lage, Abhängigkeiten zu bearbeiten, die sich für Standorte außerhalb der Wurzeldateien entschließen, was es auch in einem monorepo-basierten Setup verwendbar macht.

Vite unterstützt auch mehrseitige Apps mit mehreren .html Einstiegspunkten.

Alternative Wurzel Angeben

Das Ausführen vite startet den Dev -Server mit dem aktuellen Arbeitsverzeichnis als Root. Sie können eine alternative Wurzel mit vite serve some/sub/dir angeben. Beachten Sie, dass VITE auch seine Konfigurationsdatei (dh vite.config.js ) im Projektroot auflöst. Sie müssen sie also verschieben, wenn das Stammveränderungen geändert wird.

Befehlszeilenschnittstelle

In einem Projekt, bei dem Vite installiert ist, können Sie die vite -Binärdatoren in Ihren NPM -Skripten verwenden oder es direkt mit npx vite ausführen. Hier sind die Standard -NPM -Skripte in einem Gerüstprojekt:

package.json

{
  "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. Laufen Sie in Ihrem Projekt npx vite --help für eine vollständige Liste der CLI -Optionen.

Erfahren Sie mehr über die Befehlszeilenschnittstelle

Verwenden Unveröffentlichter Commits

Wenn Sie es kaum erwarten können, dass eine neue Version die neuesten Funktionen testen, können Sie ein bestimmtes Komitee von VITE mit https://pkg.pr.new installieren:

npm

$ npm install -D https://pkg.pr.new/vite@SHA

Yarn

$ yarn add -D https://pkg.pr.new/vite@SHA

pnpm

$ pnpm add -D https://pkg.pr.new/vite@SHA

Bun

$ bun add -D https://pkg.pr.new/vite@SHA

Ersetzen Sie SHA durch eine der Vite's Commit Shas . Beachten Sie, dass sich nur im letzten Monat Commits funktionieren, da ältere Veröffentlichungen für die Commit ausgelöscht werden.

Alternativ können Sie das vite Repo auch auf Ihre lokale Maschine klonen und dann selbst erstellen und verknüpfen ( PNPM ist erforderlich):

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # Verwenden Sie Ihren bevorzugten Paketmanager für diesen Schritt

Gehen Sie dann zu Ihrem vite -basierten Projekt und führen Sie pnpm link --global vite aus (oder zu dem Paketmanager, mit dem Sie vite global verlinkt haben). Starten Sie nun den Entwicklungsserver neu, um am Blutungsrand zu fahren!

Dependencies using Vite

Um die vite -Version zu ersetzen, die von Abhängigkeiten transitiv verwendet wird, sollten Sie NPM -Überschreibungen oder PNPM -Überschreibungen verwenden.

Gemeinschaft

Wenn Sie Fragen haben oder Hilfe benötigen, wenden Sie sich an die Community bei Discord- und Github -Diskussionen .