Vite mit Claude Code: Blitzschnelle Build-Tools 2026

1. Vite 6 Setup & Grundlagen

Vite (französisch für "schnell") ist 2021 von Evan You (Vue.js-Schöpfer) veröffentlicht worden und hat sich zur meistgenutzten Build-Tool-Alternative zu Webpack entwickelt. In 2026 ist Vite 6 der De-facto-Standard für React, Vue, Svelte und Vanilla-TypeScript-Projekte. Claude Code kennt die Vite-API in- und auswendig und kann komplexe vite.config.ts-Setups in wenigen Sekunden generieren.

Warum Vite statt Webpack? Webpack bündelt alle Module beim Start — Vite serviert sie als native ES Modules und transpiliert nur on-demand. Bei großen Projekten bedeutet das: Kaltstart in 300ms statt 30 Sekunden.

Neues Projekt erstellen

Mit npm create vite@latest startet der interaktive Scaffolding-Wizard. Claude Code kann den gesamten Prozess automatisieren und direkt die richtige Vorlage für deinen Stack wählen:

Terminal

# Interaktiver Wizard
npm create vite@latest my-app

# Direkt mit Template (kein Wizard)
npm create vite@latest my-react-app -- --template react-ts
npm create vite@latest my-vue-app -- --template vue-ts
npm create vite@latest my-svelte-app -- --template svelte-ts

# Projektstruktur ansehen
cd my-react-app
npm install
npm run dev

vite.config.ts: Die Schaltzentrale

Die vite.config.ts ist der Einstiegspunkt für alle Konfigurationen. Claude Code kennt alle defineConfig-Optionen und generiert typsichere Configs mit vollständiger IntelliSense-Unterstützung:

vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'

export default defineConfig(({ command, mode }) => {
  // Umgebungsvariablen laden
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [react()],

    // Pfad-Aliase für saubere Imports
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
        '@components': resolve(__dirname, './src/components'),
        '@hooks': resolve(__dirname, './src/hooks'),
        '@utils': resolve(__dirname, './src/utils'),
        '@types': resolve(__dirname, './src/types'),
      }
    },

    // Nur VITE_* Variablen ans Frontend exponieren
    envPrefix: ['VITE_', 'PUBLIC_'],

    // Dev-Server Konfiguration
    server: {
      port: 3000,
      strictPort: true,
      host: true,
      open: true,
      proxy: {
        '/api': {
          target: env.VITE_API_URL || 'http://localhost:8080',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },

    // Production Build Optimierungen
    build: {
      target: 'esnext',
      outDir: 'dist',
      sourcemap: mode === 'development',
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['react', 'react-dom'],
            router: ['react-router-dom'],
          }
        }
      },
      chunkSizeWarningLimit: 600
    },

    // CSS Preprocessors
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/styles/variables";`
        }
      },
      modules: {
        localsConvention: 'camelCase'
      }
    }
  }
})

TypeScript-Konfiguration für Vite

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Tipp envPrefix & Sicherheit

Mit envPrefix: ['VITE_'] landen nur Variablen mit diesem Prefix im Frontend-Bundle. Alle anderen (z.B. DATABASE_URL) bleiben serverseitig — Claude Code prüft das automatisch bei der Code-Generierung.

2. HMR & Dev-Server: Warum Vite so schnell ist

Vites Geschwindigkeit kommt nicht von Magie — sie kommt von einem fundamentalen Architekturentscheid: kein Bundling im Dev-Modus. Während Webpack beim Start alle Imports auflöst und bündelt, serviert Vite native ES Modules direkt an den Browser. Der Browser selbst übernimmt das Modul-Loading.

Metrik	Webpack 5	Vite 6	Vorteil
Kaltstart (500 Module)	~15–45 Sekunden	~300ms	50–150× schneller
HMR-Update	~2–8 Sekunden	<50ms	sofort spürbar
Production Build	~60s	~8–15s (Rollup)	4–8× schneller
TypeScript Transpilation	ts-loader (langsam)	esbuild (Go)	20–30× schneller

Das HMR-Protokoll im Detail

Hot Module Replacement (HMR) ersetzt geänderte Module zur Laufzeit ohne Seiten-Reload. Vites HMR-Protokoll ist WebSocket-basiert und kommuniziert präzise welches Modul sich geändert hat:

Vites HMR-Flow (vereinfacht)

// 1. Datei ändert sich auf dem Server
// 2. Vite erkennt Änderung via fs.watch()
// 3. Nur der betroffene Subgraph wird invalidiert
// 4. Browser empfängt HMR-Payload via WebSocket

// client.ts (Vite intern)
const socket = new WebSocket(`ws://${location.host}/__vite_hmr`)

socket.addEventListener('message', ({ data }) => {
  const payload = JSON.parse(data)
  switch (payload.type) {
    case 'update':
      payload.updates.forEach(update => {
        if (update.type === 'js-update') {
          queueUpdate(fetchUpdate(update))
        }
      })
      break
    case 'full-reload':
      location.reload()
      break
  }
})

Eigene HMR-Handler schreiben

Für Custom-State-Management oder Animations-Libraries kann man explizite HMR-Akzeptanz registrieren — Claude Code generiert diese Boilerplate auf Anfrage:

src/store.ts — HMR-sicheres State Management

import { createStore } from './storeFactory'

export const store = createStore({
  count: 0,
  user: null,
})

// HMR: Store-State beim Hot-Reload erhalten
if (import.meta.hot) {
  import.meta.hot.accept()
  import.meta.hot.dispose((data) => {
    // State vor dem Dispose sichern
    data.state = store.getState()
  })

  // State nach Hot-Update wiederherstellen
  if (import.meta.hot.data.state) {
    store.setState(import.meta.hot.data.state)
  }
}

esbuild-Transpilation: Der Turbo-Motor

Vite verwendet esbuild (in Go geschrieben) für TypeScript-Transpilation im Dev-Modus. Das macht die Transformation ca. 20–30× schneller als ts-loader. Für Production-Builds kommt Rollup zum Einsatz — stabiler und mit besseren Tree-Shaking-Ergebnissen.

Performance vite --open & --host

vite --open öffnet automatisch den Browser. vite --host 0.0.0.0 macht den Dev-Server im lokalen Netzwerk erreichbar — nützlich für Mobile-Tests ohne Produktions-Build.

package.json Scripts

{
  "scripts": {
    "dev": "vite --open",
    "dev:host": "vite --host --port 3000",
    "build": "tsc && vite build",
    "build:analyze": "ANALYZE=true vite build",
    "preview": "vite preview --port 4173",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
    "typecheck": "tsc --noEmit"
  }
}

3. Plugin-Ökosystem: React, Vue, Bildoptimierung & mehr

Vites Plugin-API basiert auf Rollups Plugin-Interface und erweitert es um Dev-Server-Hooks. Das bedeutet: Tausende Rollup-Plugins funktionieren direkt mit Vite — und das wachsende Vite-eigene Ökosystem kommt on top. Claude Code kennt die beliebtesten Plugins und konfiguriert sie korrekt.

Offizielle Framework-Plugins

React @vitejs/plugin-react Vue @vitejs/plugin-vue Svelte @sveltejs/vite-plugin-svelte

vite.config.ts — React mit SWC (noch schneller)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'  // SWC statt Babel

export default defineConfig({
  plugins: [
    react({
      // Babel-Transforms (nur bei @vitejs/plugin-react)
      babel: {
        plugins: [
          ['@babel/plugin-proposal-decorators', { legacy: true }],
        ]
      }
    })
  ]
})

vite-imagetools: Bilder on-the-fly optimieren

vite-imagetools transformiert Bilder direkt beim Import — Resize, WebP-Konvertierung, Blur-Placeholder und mehr, alles via URL-Parameter:

Installation & Konfiguration

npm install vite-imagetools

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { imagetools } from 'vite-imagetools'

export default defineConfig({
  plugins: [
    react(),
    imagetools({
      defaultDirectives: new URLSearchParams({
        format: 'webp',
        quality: '80'
      })
    })
  ]
})

src/components/Hero.tsx — Bild-Import mit Transforms

// Automatisch zu WebP + 800px Breite transformieren
import heroWebp from './hero.jpg?w=800&format=webp'
// AVIF mit Blur-Placeholder
import { src, width, height, blur } from './hero.jpg?metadata&blur=20'

export function Hero() {
  return (
    <img
      src={heroWebp}
      width={width}
      height={height}
      style={{ backgroundImage: `url(${blur})` }}
      loading="lazy"
    />
  )
}

rollup-plugin-visualizer: Bundle analysieren

Einer der wichtigsten Tools für Performance-Optimierung: Der Visualizer zeigt welche Module wie viel Bundle-Größe verursachen — als interaktives Treemap-Diagramm:

vite.config.ts

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    react(),
    // Nur beim Analyse-Build aktiv
    process.env.ANALYZE && visualizer({
      filename: './dist/stats.html',
      open: true,
      gzipSize: true,
      brotliSize: true,
      template: 'treemap'  // 'sunburst' | 'network' | 'raw-data'
    })
  ].filter(Boolean)
})

Eigene Vite-Plugins schreiben

Die Plugin-API ist einfach und mächtig — Claude Code kann Custom-Plugins für automatisches Code-Generieren, Datei-Transformation oder Build-Optimierungen erstellen:

plugins/virtual-routes.ts — Eigenes Plugin

import type { Plugin } from 'vite'

export function virtualRoutesPlugin(): Plugin {
  const virtualModuleId = 'virtual:routes'
  const resolvedVirtualModuleId = '\0' + virtualModuleId

  return {
    name: 'virtual-routes',

    // Modul-Auflösung: virtual:routes → internes Modul
    resolveId(id) {
      if (id === virtualModuleId) {
        return resolvedVirtualModuleId
      }
    },

    // Modul-Inhalt generieren (wird bei Build ausgeführt)
    async load(id) {
      if (id === resolvedVirtualModuleId) {
        // Alle .page.tsx Dateien automatisch finden
        const routes = await globRoutes('src/pages/**/*.page.tsx')
        return generateRoutesCode(routes)
      }
    },

    // HMR: Bei neuen Seiten-Dateien neuladen
    handleHotUpdate({ file, server }) {
      if (file.includes('/pages/')) {
        server.ws.send({ type: 'full-reload' })
      }
    }
  }
}

Empfehlung Top Vite Plugins 2026

@vitejs/plugin-react-swc — 5× schnellere Transpilation via SWC (Rust) | vite-plugin-pwa — Progressive Web App in einer Zeile | unplugin-auto-import — Auto-Imports für React Hooks, Vue Composables | vite-plugin-checker — TypeScript + ESLint parallel im Dev-Server | vite-tsconfig-paths — tsconfig paths automatisch als Vite-Aliases

4. Library Mode: npm-Pakete mit Vite bauen

Vites Library Mode ist ideal für Komponenten-Libraries, Design Systems oder Utility-Pakete. Statt einer Web-App baut Vite eine npm-publishbare Library in mehreren Formaten gleichzeitig: ESM (für moderne Bundler), CJS (für Node.js/CommonJS), und optional UMD (für CDN-Nutzung via Script-Tag).

vite.config.ts — Library Mode

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import dts from 'vite-plugin-dts'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
    react(),
    dts({
      // TypeScript-Typen (.d.ts) automatisch generieren
      insertTypesEntry: true,
      include: ['src'],
      exclude: ['src/**/*.stories.tsx', 'src/**/*.test.tsx']
    })
  ],

  build: {
    lib: {
      // Entry-Point der Library
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyComponentLib',

      // Mehrere Ausgabe-Formate gleichzeitig
      formats: ['es', 'cjs'],

      // Dateinamen pro Format
      fileName: (format) => `my-lib.${format}.js`
    },

    rollupOptions: {
      // React NICHT in die Library bündeln (Peer Dependency)
      external: ['react', 'react-dom', 'react/jsx-runtime'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        },
        // CSS in separater Datei
        assetFileNames: (assetInfo) => {
          if (assetInfo.name === 'style.css') return 'my-lib.css'
          return assetInfo.name!
        }
      }
    }
  }
})

package.json für Library-Publishing

package.json

{
  "name": "@myorg/component-lib",
  "version": "1.0.0",
  "type": "module",

  // Exports Map: welches Format für welchen Kontext
  "exports": {
    ".": {
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.cjs.js",
      "types": "./dist/index.d.ts"
    },
    "./styles": "./dist/my-lib.css"
  },

  "main": "./dist/my-lib.cjs.js",
  "module": "./dist/my-lib.es.js",
  "types": "./dist/index.d.ts",
  "files": ["dist"],

  "peerDependencies": {
    "react": ">=18.0.0",
    "react-dom": ">=18.0.0"
  },

  "scripts": {
    "build": "vite build && tsc --emitDeclarationOnly",
    "prepublishOnly": "npm run build"
  }
}

src/index.ts: Der Library Entry-Point

src/index.ts

// Alle öffentlichen Exporte der Library
export { Button } from './components/Button'
export { Modal } from './components/Modal'
export { DataTable } from './components/DataTable'
export { useTheme, ThemeProvider } from './theme'

// Typen re-exportieren
export type { ButtonProps } from './components/Button'
export type { ModalProps } from './components/Modal'
export type { Theme } from './theme'

Wichtig externals korrekt setzen

Alle Peer Dependencies müssen in external stehen — sonst landet z.B. React doppelt im Bundle des Consumers. Claude Code prüft beim Code-Review automatisch ob alle peerDependencies auch als externals konfiguriert sind.

5. Vitest Integration: Testing direkt aus der Vite-Config

Vitest ist das native Test-Framework für Vite — es nutzt dieselbe Konfiguration, dieselben Transforms und dieselben Plugins. Kein separates Jest-Config-File, keine Babel-Konfiguration, kein jest.config.js parallel zu vite.config.ts. Claude Code integriert Vitest in bestehende Projekte mit einem einzigen Prompt.

Installation

npm install -D vitest @vitest/ui @vitest/coverage-v8
npm install -D @testing-library/react @testing-library/jest-dom jsdom

vitest.config.ts (oder direkt in vite.config.ts)

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    // Browser-ähnliche Umgebung (für DOM-Tests)
    environment: 'jsdom',

    // Automatisch jest-dom Matchers laden
    setupFiles: ['./src/test/setup.ts'],

    // Glob-Pattern für Test-Dateien
    include: ['src/**/*.{test,spec}.{ts,tsx}'],
    exclude: ['node_modules', 'dist'],

    // Coverage Konfiguration
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html', 'lcov'],
      thresholds: {
        branches: 80,
        functions: 85,
        lines: 85,
        statements: 85
      },
      exclude: [
        'src/test/**',
        'src/**/*.stories.tsx',
        'src/main.tsx'
      ]
    },

    // Parallele Ausführung
    pool: 'forks',
    poolOptions: {
      forks: { singleFork: false }
    },

    // Watch-Mode Standard
    watchExclude: ['**/node_modules/**', '**/dist/**']
  }
})

Tests schreiben: describe, it, expect

src/utils/currency.test.ts

import { describe, it, expect, beforeEach } from 'vitest'
import { formatCurrency, parseCurrency, convertCurrency } from './currency'

describe('formatCurrency', () => {
  it('formatiert EUR korrekt', () => {
    expect(formatCurrency(1234.56, 'EUR')).toBe('1.234,56 €')
    expect(formatCurrency(0, 'EUR')).toBe('0,00 €')
  })

  it('formatiert negative Beträge korrekt', () => {
    expect(formatCurrency(-99.99, 'EUR')).toBe('-99,99 €')
  })

  it('wirft bei ungültiger Währung', () => {
    expect(() => formatCurrency(100, 'INVALID')).toThrow('Unsupported currency')
  })
})

describe('convertCurrency', () => {
  beforeEach(() => {
    // Jeder Test startet frisch
    vi.clearAllMocks()
  })

  it('konvertiert USD zu EUR mit aktuellem Kurs', async () => {
    const result = await convertCurrency(100, 'USD', 'EUR')
    expect(result).toBeCloseTo(91.5, 0)
    expect(result).toBeGreaterThan(80)
    expect(result).toBeLessThan(110)
  })
})

vi.mock: Dependencies mocken

src/services/api.test.ts — Fetch mocken

import { describe, it, expect, vi, beforeEach } from 'vitest'
import { fetchUser, createUser } from './api'

// Gesamtes Modul mocken
vi.mock('./httpClient', () => ({
  httpClient: {
    get: vi.fn(),
    post: vi.fn(),
  }
}))

import { httpClient } from './httpClient'

describe('fetchUser', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })

  it('gibt User-Daten zurück', async () => {
    const mockUser = { id: '1', name: 'Daniel', email: 'd@example.com' }
    vi.mocked(httpClient.get).mockResolvedValueOnce({ data: mockUser })

    const user = await fetchUser('1')

    expect(httpClient.get).toHaveBeenCalledWith('/users/1')
    expect(user).toEqual(mockUser)
  })

  it('wirft bei HTTP-Fehler', async () => {
    vi.mocked(httpClient.get).mockRejectedValueOnce(new Error('404 Not Found'))
    await expect(fetchUser('999')).rejects.toThrow('404 Not Found')
  })
})

Coverage & Vitest UI

package.json — Test Scripts

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest run --coverage",
    "test:ci": "vitest run --coverage --reporter=verbose"
  }
}

Vitest UI Visuelles Test-Dashboard

npm run test:ui öffnet ein Browser-Dashboard mit allen Tests, Coverage-Ansicht, Snapshot-Diff und der Möglichkeit einzelne Tests per Klick auszuführen. Perfekt für TDD-Workflows — Claude Code kann Tests auch im Watch-Mode iterativ schreiben.

6. SSR & Multi-Page Apps mit Vite

Vites SSR-Unterstützung ist framework-agnostisch — es gibt keine Meinung darüber wie SSR implementiert werden soll, nur die primitives um es effizient umzusetzen. Frameworks wie Nuxt, SvelteKit und Remix bauen auf dieser API auf. Claude Code kann SSR-Setups von scratch generieren oder bestehende migrieren.

SSR Grundprinzip: ssrLoadModule & ssrTransformResult

server/index.ts — Express SSR Server

import express from 'express'
import { createServer as createViteServer } from 'vite'
import { readFileSync } from 'fs'
import { resolve } from 'path'

const isProd = process.env.NODE_ENV === 'production'

async function createServer() {
  const app = express()

  let vite: any

  if (!isProd) {
    // Dev: Vite Dev-Server als Middleware
    vite = await createViteServer({
      server: { middlewareMode: true },
      appType: 'custom'
    })
    app.use(vite.middlewares)
  } else {
    // Prod: Statische Assets servieren
    app.use(express.static('dist/client'))
  }

  app.use('*', async (req, res) => {
    const url = req.originalUrl

    try {
      // HTML-Template laden
      let template = readFileSync(
        isProd ? 'dist/client/index.html' : 'index.html', 'utf-8'
      )

      if (!isProd) {
        // Dev: Template durch Vite transformieren (HMR-Injection)
        template = await vite.transformIndexHtml(url, template)
      }

      // SSR-Modul laden (Dev: Hot-Reload, Prod: gebundelt)
      const { render } = isProd
        ? await import('./dist/server/entry-server.js')
        : await vite.ssrLoadModule('/src/entry-server.tsx')

      // Server-seitiges Rendering
      const { html: appHtml, state } = await render(url)

      // HTML zusammensetzen
      const fullHtml = template
        .replace('<!--ssr-outlet-->', appHtml)
        .replace('<!--ssr-state-->', `<script>window.__SSR_STATE__=${JSON.stringify(state)}</script>`)

      res.status(200).set({ 'Content-Type': 'text/html' }).end(fullHtml)
    } catch (e: any) {
      vite?.ssrFixStacktrace(e)
      res.status(500).end(e.message)
    }
  })

  app.listen(5173, () => console.log('SSR Server läuft auf http://localhost:5173'))
}

createServer()

Multi-Page Apps (MPA) mit rollupOptions.input

Für traditionelle Multi-Page-Websites ohne SPA-Routing bietet Vite native MPA-Unterstützung — jede HTML-Datei wird als eigener Entry-Point behandelt:

vite.config.ts — Multi-Page App

import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        // Jede HTML-Seite als eigener Entry-Point
        main: resolve(__dirname, 'index.html'),
        blog: resolve(__dirname, 'blog/index.html'),
        pricing: resolve(__dirname, 'pricing/index.html'),
        contact: resolve(__dirname, 'contact/index.html'),
        // Dynamisch aus Verzeichnis generieren:
        // ...Object.fromEntries(
        //   glob.sync('src/pages/**/*.html').map(f => [
        //     f.replace('src/pages/', '').replace('.html', ''),
        //     resolve(__dirname, f)
        //   ])
        // )
      }
    }
  },
  // Shared Assets über alle Seiten
  resolve: {
    alias: {
      '@shared': resolve(__dirname, 'src/shared')
    }
  }
})

Vite Environment API (Vite 6 — neu)

Vite 6 führt die Environment API ein — ein zentrales Konzept das verschiedene Ausführungsumgebungen (Browser, Node.js, Edge-Runtime) innerhalb eines Projekts klar trennt:

vite.config.ts — Environment API (Vite 6)

import { defineConfig } from 'vite'

export default defineConfig({
  environments: {
    // Browser-Umgebung (Standard)
    client: {
      build: {
        outDir: 'dist/client'
      }
    },
    // Server-Umgebung (SSR)
    ssr: {
      build: {
        outDir: 'dist/server',
        ssr: true
      }
    },
    // Edge-Runtime (z.B. Cloudflare Workers)
    edge: {
      build: {
        outDir: 'dist/edge',
        target: 'esnext'
      },
      resolve: {
        conditions: ['worker', 'browser']
      }
    }
  }
})

SSR Static Site Generation mit Vite

Für vollständig statische Seiten kombiniert man Vites MPA-Mode mit einem Node.js-Skript das alle Routen pre-rendert und als statisches HTML ablegt. Claude Code generiert auf Anfrage ein vollständiges SSG-Setup mit dynamischen Routen aus CMS-Daten.

Deployment-Strategien

Deployment-Ziel	Ansatz	Vite-Befehl
Vercel / Netlify	SPA (statisch)	`vite build`
Node.js Server	SSR mit Express	`vite build --ssr`
Cloudflare Workers	Edge SSR	Environment API
GitHub Pages	MPA statisch	`vite build` + base
Docker	Nginx + dist/	`vite build`

Mit Claude Code Vite-Projekte in Minuten aufsetzen

Kein manuelles Konfigurieren von vite.config.ts, Plugins oder SSR-Setup. Claude Code kennt die Vite 6 API vollständig und baut dein Build-System auf Abruf — von der ersten Zeile bis zum Production-Deploy.

Kostenlos testen — Kein Kreditkarte nötig

Vite 6 Claude Code TypeScript Build Tools HMR Vitest SSR Library Mode React esbuild Rollup Frontend 2026