Vite

Was ist es?

Vite ist das Build-Tool von Evan You (Vue-Creator) — native ES-Module im Dev für Lightning-fast HMR, Rollup für Production-Builds. De-facto-Standard für SPAs außerhalb von Next.js / Remix.

Quickstart

pnpm create vite@latest my-app -- --template react-ts
cd my-app && pnpm install && pnpm dev

vite.config.ts ist minimal:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({ plugins: [react()] })

Typische Patterns

• Plugin-Ökosystem: @vitejs/plugin-react, vite-plugin-pwa, unplugin-icons.
• Env-Vars über VITE_*-Prefix: import.meta.env.VITE_API_URL.
• Glob-Imports:

  const modules = import.meta.glob('./pages/*.tsx', { eager: true })
  

• SSR-Mode für Custom-Frameworks (Astro, Nuxt, SvelteKit bauen darauf auf).
• Vitest als Companion-Test-Runner — teilt Vite-Config.

Gotchas / Was oft schiefgeht