vite-build-tool

What this skill does

# Vite Build Tool Skill

---
progressive_disclosure:
  entry_point:
    summary: "Lightning-fast build tool with instant HMR and ESM-first architecture for modern web development"
    when_to_use:
      - "When building React/Vue/Svelte/Preact applications"
      - "When needing instant HMR (Hot Module Replacement)"
      - "When migrating from webpack/CRA/Parcel"
      - "When setting up TypeScript projects with zero config"
      - "When building component libraries or UI frameworks"
    quick_start:
      - "npm create vite@latest my-app"
      - "Select framework: React/Vue/Svelte/Vanilla"
      - "cd my-app && npm install && npm run dev"
    essential_commands:
      - "vite: Start dev server with instant HMR"
      - "vite build: Production build with Rollup"
      - "vite preview: Preview production build locally"
  token_estimate:
    entry: 75
    full: 4000
---

## Core Concepts

### Why Vite?

**ESM-First Architecture**
- No bundling in development - serves native ESM
- Instant cold server start (no matter project size)
- Lightning-fast HMR that stays fast as app grows
- Rollup-based production builds with optimal code splitting

**Key Advantages**
- **Dev Speed**: 10-100x faster than webpack (no bundling)
- **Zero Config**: TypeScript, JSX, CSS modules out-of-box
- **Framework Agnostic**: React, Vue, Svelte, Preact, Lit
- **Plugin Ecosystem**: Rollup plugins + Vite-specific plugins
- **Modern by Default**: ESM, dynamic imports, top-level await

## Quick Start

### Create New Project

```bash
# Interactive creation
npm create vite@latest

# With template
npm create vite@latest my-app -- --template react-ts
npm create vite@latest my-app -- --template vue
npm create vite@latest my-app -- --template svelte-ts

# Available templates:
# vanilla, vanilla-ts
# react, react-ts, react-swc, react-swc-ts
# vue, vue-ts
# svelte, svelte-ts
# preact, preact-ts
# lit, lit-ts
```

### Essential Commands

```bash
# Development server (instant start)
npm run dev
vite --port 3000 --host 0.0.0.0

# Production build
npm run build
vite build --mode production

# Preview production build
npm run preview
vite preview --port 8080

# Clear cache (dependency pre-bundling)
rm -rf node_modules/.vite
```

## Configuration

### Basic vite.config.ts

```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],

  // Dev server
  server: {
    port: 3000,
    open: true,
    cors: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

  // Build options
  build: {
    outDir: 'dist',
    sourcemap: true,
    minify: 'terser',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash-es', 'date-fns']
        }
      }
    }
  },

  // Path aliases
  resolve: {
    alias: {
      '@': '/src',
      '@components': '/src/components',
      '@utils': '/src/utils'
    }
  }
});
```

### Framework-Specific Configs

**React + TypeScript + SWC**
```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import path from 'path';

export default defineConfig({
  plugins: [
    react({
      // Enable Fast Refresh
      fastRefresh: true,
      // SWC optimizations
      tsDecorators: true
    })
  ],

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },

  build: {
    target: 'es2020',
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('react') || id.includes('react-dom')) {
              return 'react-vendor';
            }
            return 'vendor';
          }
        }
      }
    }
  }
});
```

**Vue 3 + TypeScript**
```typescript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
  plugins: [
    vue(),
    vueJsx() // For JSX/TSX in Vue
  ],

  resolve: {
    alias: {
      '@': '/src',
      'vue': 'vue/dist/vue.esm-bundler.js'
    }
  },

  // Vue-specific optimizations
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia']
  }
});
```

**Svelte + TypeScript**
```typescript
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        dev: process.env.NODE_ENV !== 'production'
      },
      hot: {
        preserveLocalState: true
      }
    })
  ],

  build: {
    target: 'es2020',
    minify: 'esbuild'
  }
});
```

## Environment Variables

### .env Files

```bash
# .env (loaded in all cases)
VITE_APP_TITLE=My App

# .env.local (local overrides, gitignored)
VITE_API_KEY=secret-key

# .env.development
VITE_API_URL=http://localhost:8000

# .env.production
VITE_API_URL=https://api.production.com
```

### Usage in Code

```typescript
// TypeScript: Define env types
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  readonly VITE_API_URL: string;
  readonly VITE_API_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

// Access variables (MUST start with VITE_)
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'
console.log(import.meta.env.DEV); // boolean
console.log(import.meta.env.PROD); // boolean
```

### vite-env.d.ts

```typescript
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  readonly VITE_API_URL: string;
  readonly VITE_API_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
```

## Plugin Ecosystem

### Official Plugins

```bash
# React
npm install -D @vitejs/plugin-react          # Babel-based
npm install -D @vitejs/plugin-react-swc      # SWC-based (faster)

# Vue
npm install -D @vitejs/plugin-vue
npm install -D @vitejs/plugin-vue-jsx

# Svelte
npm install -D @sveltejs/vite-plugin-svelte

# Legacy browser support
npm install -D @vitejs/plugin-legacy
```

### Essential Community Plugins

```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import tsconfigPaths from 'vite-tsconfig-paths';
import { VitePWA } from 'vite-plugin-pwa';
import compression from 'vite-plugin-compression';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    react(),

    // TypeScript paths from tsconfig.json
    tsconfigPaths(),

    // PWA support
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My App',
        short_name: 'App',
        theme_color: '#ffffff'
      }
    }),

    // Gzip/Brotli compression
    compression({
      algorithm: 'brotliCompress',
      ext: '.br'
    }),

    // Bundle size visualization
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true
    })
  ]
});
```

## TypeScript Configuration

### tsconfig.json for Vite

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    /* Path aliases */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
```

### tsconfig.node.json (for config files)

```json
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module":