ComeOnOliver/skillshub

Vite

Basierend auf Vite 8 Beta (unterstützt durch Rolldown). Vite 8 verwendet den Rolldown-Bundler und den Oxc-Transformer.

Vite ist ein modernes Frontend-Build-Tool mit schnellem Entwicklungsserver (nativer ESM + HMR) und optimierten Produktions-Builds.

Präferenzen

• Verwenden Sie TypeScript: Bevorzugen Sie vite.config.ts
• Verwenden Sie immer ESM, vermeiden Sie CommonJS

Kern

Thema	Beschreibung	Referenz
Konfiguration	vite.config.ts, defineConfig, bedingte Konfigurationen, loadEnv	core-config
Funktionen	import.meta.glob, Asset-Queries (?raw, ?url), import.meta.env, HMR-API	core-features
Plugin-API	Vite-spezifische Hooks, virtuelle Module, Plugin-Reihenfolge	core-plugin-api

Build & SSR

Thema	Beschreibung	Referenz
Build & SSR	Bibliotheksmodus, SSR-Middleware-Modus, ssrLoadModule, JavaScript-API	build-and-ssr

Fortgeschritten

Thema	Beschreibung	Referenz
Umgebungs-API	Vite 6+ Multi-Umgebungsunterstützung, benutzerdefinierte Laufzeiten	environment-api
Rolldown-Migration	Vite 8 Änderungen: Rolldown-Bundler, Oxc-Transformer, Konfigurationsmigration	rolldown-migration

Kurzreferenz

CLI-Befehle

vite              # Entwicklungsserver starten
vite build        # Produktions-Build
vite preview      # Produktions-Build anzeigen
vite build --ssr  # SSR-Build

Übliche Konfiguration

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  resolve: { alias: { '@': '/src' } },
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
  build: { target: 'esnext', outDir: 'dist' },
})

Offizielle Plugins

• @vitejs/plugin-vue - Vue 3 SFC-Unterstützung
• @vitejs/plugin-vue-jsx - Vue 3 JSX
• @vitejs/plugin-react - React mit Oxc/Babel
• @vitejs/plugin-react-swc - React mit SWC
• @vitejs/plugin-legacy - Legacy-Browser-Unterstützung