Ein Frontend mit Vite und Bun erstellen

NOTE

Sie können Vite mit Bun verwenden, aber viele Projekte erhalten schnellere Builds und reduzieren Hunderte von Abhängigkeiten, indem sie zu [HTML-Imports](/bundler/html-static) wechseln.

Vite funktioniert out of the box mit Bun. Beginnen Sie mit einer der Vite-Vorlagen.

bash

bun create vite my-app

txt

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
Scaffolding project in /path/to/my-app...

Wechseln Sie dann mit cd in das Projektverzeichnis und installieren Sie die Abhängigkeiten.

bash

cd my-app
bun install

Starten Sie den Entwicklungsserver mit der vite-CLI mit bunx.

Das --bun-Flag teilt Bun mit, dass es Vites CLI mit bun anstelle von node ausführen soll; standardmäßig respektiert Bun Vites #!/usr/bin/env node Shebang-Zeile.

bash

bunx --bun vite

Um diesen Befehl zu vereinfachen, aktualisieren Sie das "dev"-Skript in package.json wie folgt.

json

  "scripts": {
    "dev": "vite", 
    "dev": "bunx --bun vite", 
    "build": "vite build",
    "serve": "vite preview"
  },
  // ...

Jetzt können Sie den Entwicklungsserver mit bun run dev starten.

bash

bun run dev

Der folgende Befehl erstellt Ihre App für die Produktion.

bunx --bun vite build

Dies ist ein reduzierter Leitfaden, um mit Vite + Bun zu beginnen. Für weitere Informationen siehe die Vite-Dokumentation.