Cheatsheet Vite

npm create vite@latest my-app
npm create vite@latest -- --template react
npm create vite@latest -- --template vue
npm create vite@latest -- --template svelte
cd my-app && npm install

Inicializar proyecto Vite.

vanilla     # JS puro
react       # React
vue         # Vue 3
svelte      # Svelte
solid       # SolidJS
preact, lit, qwik...

Templates con variantes TS.

index.html    # entry point
src/
  main.js    # JS principal
  App.vue    # componente raíz
public/      # assets estáticos
vite.config.js
package.json

Estructura estándar.

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

export default defineConfig({
  plugins: [react()],
  server: { port: 3000 },
  base: '/',
})

Configuración básica.

resolve: {
  alias: {
    '@': '/src',
    '~': '/src/components',
  },
}

Atajos de import.

// .env / .env.production
VITE_API_URL=https://api.example.com

// En el código:
import.meta.env.VITE_API_URL
import.meta.env.MODE
import.meta.env.PROD // true/false

Env vars con prefijo VITE_.

// Soporte nativo para:
// .css, .scss, .sass, .less, .styl
npm i -D sass  # para SASS

css: {
  modules: { localsConvention: 'camelCase' },
  preprocessorOptions: {
    scss: { additionalData: `@import "vars";` }
  }
}

Procesamiento de CSS.

@vitejs/plugin-react
@vitejs/plugin-vue
@vitejs/plugin-legacy

plugins: [
  react(),
  legacy({ targets: ['defaults'] }),
]

Plugins del equipo de Vite.

vite-plugin-pwa    # PWA
vite-plugin-svgr   # SVG como componente
vite-plugin-inspect # debug
unplugin-auto-import # auto imports
unplugin-vue-components

Ecosistema de plugins.

function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (id.endsWith('.special')) {
        return { code: transform(code) }
      }
    },
  }
}

Crear plugin propio.

npm run dev   # o vite

server: {
  port: 3000,
  open: true,
  host: true,  // exponer en la red
  https: true,
}

Servidor de desarrollo.

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (p) => p.replace(/^\/api/, ''),
    },
  }
}

Proxy para el backend.

// HMR automático (sin config)
// import.meta.hot para control manual:
if (import.meta.hot) {
  import.meta.hot.accept((mod) => {
    console.log('¡Actualizado!')
  })
}

Hot Module Replacement.

npm run build  # o vite build

build: {
  outDir: 'dist',
  sourcemap: true,
  minify: 'terser',
  target: 'es2020',
}

Generar build optimizado.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'],
      },
    },
  }
}

Dividir en chunks.

npm run preview  # servir dist/

// Análisis de bundle:
npm i -D rollup-plugin-visualizer
import { visualizer } from 'rollup-plugin-visualizer'
plugins: [visualizer({ open: true })]

Previsualizar y analizar el build.

build: {
  lib: {
    entry: 'src/index.js',
    name: 'MyLib',
    formats: ['es', 'cjs', 'umd'],
  },
  rollupOptions: {
    external: ['react'],
  }
}

Build como biblioteca.

npx vite           # dev server
npx vite build     # build de producción
npx vite preview   # servir dist
npx vite optimize  # pre-bundling

Comandos principales.

--port 3000
--host 0.0.0.0
--open
--mode staging
--config vite.custom.js
--debug

Opciones de CLI.

# Ventajas de Vite:
# • Dev server instantáneo (ESM)
# • HMR ultrarrápido
# • Build con Rollup (optimizado)
# • Config mínima
# • Soporte TS/JSX nativo

Por qué elegir Vite.