onmax/vite

O que vite faz?

Configuração da ferramenta de build Vite, API de plugins, SSR e migração para Vite 8 com Rolldown. Use ao trabalhar com projetos Vite, vite.config.ts, plugins Vite ou ao construir bibliotecas/aplicações SSR com Vite.

Visão Geral

Esta skill abrange o ecossistema Vite, fornecendo orientação sobre configuração, criação de plugins, Server-Side Rendering (SSR) e a transição para o Vite 8 com Rolldown.

Tópicos Abordados

• Configuração do Vite: Como configurar vite.config.ts para diferentes cenários (React, Vue, Svelte, etc.).
• API de Plugins: Criação e uso de plugins Vite para estender a funcionalidade do build.
• SSR com Vite: Implementação de renderização no servidor para melhorar performance e SEO.
• Migração para Vite 8: Guia para migrar projetos existentes para o Vite 8, incluindo a transição para o Rolldown.

Comandos Úteis

# Iniciar um novo projeto Vite
npm create vite@latest my-app -- --template react-ts

# Construir para produção
npm run build

# Iniciar servidor de desenvolvimento
npm run dev

Configuração Exemplo

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});

Plugins

Criando um Plugin

// my-plugin.ts
import type { Plugin } from 'vite';

export function myPlugin(): Plugin {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (id.endsWith('.custom')) {
        return code.replace(/foo/g, 'bar');
      }
    },
  };
}

SSR

Para SSR, configure o Vite para gerar bundles tanto para o cliente quanto para o servidor.

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    ssr: true,
    rollupOptions: {
      input: '/src/entry-server.js',
    },
  },
});

Migração para Vite 8

O Vite 8 introduz o Rolldown como bundler padrão. Para migrar:

1. Atualize a versão do Vite para ^8.0.0.
2. Substitua dependências legadas que usam Rollup por alternativas compatíveis com Rolldown.
3. Ajuste a configuração se necessário, já que Rolldown pode ter ligeiras diferenças.

Consulte a documentação oficial para detalhes completos.

Recursos

• Site oficial do Vite
• Repositório GitHub
• Documentação de Plugins