Cheatsheet Vite

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

Inicializar projeto Vite.

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

Templates com variantes TS.

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

Estrutura padrão.

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

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

Configuração básica.

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

Atalhos de import.

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

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

Env vars com prefixo VITE_.

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

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

Processamento de CSS.

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

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

Plugins da equipa Vite.

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

Ecossistema de plugins.

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

Criar plugin próprio.

npm run dev   # ou vite

server: {
  port: 3000,
  open: true,
  host: true,  // expor na rede
  https: true,
}

Servidor de desenvolvimento.

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

Proxy para backend.

// HMR automático (sem config)
// import.meta.hot para controlo manual:
if (import.meta.hot) {
  import.meta.hot.accept((mod) => {
    console.log('Atualizado!')
  })
}

Hot Module Replacement.

npm run build  # ou vite build

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

Gerar build otimizado.

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

Dividir em chunks.

npm run preview  # servir dist/

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

Prever e analisar build.

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

Build como biblioteca.

npx vite           # dev server
npx vite build     # build produção
npx vite preview   # servir dist
npx vite optimize  # pré-bundling

Comandos principais.

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

Opções de CLI.

# Vantagens Vite:
# • Dev server instantâneo (ESM)
# • HMR ultrarrápido
# • Build com Rollup (otimizado)
# • Config mínima
# • Suporte TS/JSX nativo

Porquê escolher Vite.