Introdução ao Turborepo - Gerenciamento de Monorepo

O que você aprenderá neste tutorial

✓ Configuração do Turborepo
✓ Estrutura de workspaces
✓ Configuração de pipeline
✓ Uso de cache
✓ Cache remoto

Step 1: Criação do projeto

npx create-turbo@latest my-monorepo
cd my-monorepo

Step 2: Estrutura de diretórios

my-monorepo/
├── apps/
│   ├── web/          # App Next.js
│   └── docs/         # Site de documentação
├── packages/
│   ├── ui/           # Componentes UI compartilhados
│   ├── config/       # Configurações compartilhadas
│   └── tsconfig/     # Configurações TypeScript
├── turbo.json
└── package.json

Step 3: package.json raiz

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint",
    "test": "turbo run test"
  },
  "devDependencies": {
    "turbo": "^2.0.0"
  }
}

Step 4: Configuração turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {
      "dependsOn": ["build"]
    }
  }
}

Step 5: Pacotes compartilhados

// packages/ui/package.json
{
  "name": "@repo/ui",
  "version": "0.0.0",
  "main": "./index.tsx",
  "types": "./index.tsx",
  "exports": {
    ".": "./index.tsx",
    "./button": "./button.tsx"
  }
}

// packages/ui/button.tsx
export function Button({ children, onClick }: {
  children: React.ReactNode;
  onClick?: () => void;
}) {
  return (
    <button onClick={onClick} className="btn">
      {children}
    </button>
  );
}

Step 6: Uso no app

// apps/web/package.json
{
  "name": "web",
  "dependencies": {
    "@repo/ui": "workspace:*"
  }
}

// apps/web/app/page.tsx
import { Button } from '@repo/ui/button';

export default function Home() {
  return <Button>Click me</Button>;
}

Step 7: Execução de comandos

# Build de todos os pacotes
turbo build

# Apenas pacote específico
turbo build --filter=web

# Incluindo dependências
turbo build --filter=web...

# Servidor de desenvolvimento
turbo dev

# Limpar cache
turbo clean

Step 8: Cache remoto

# Cache remoto Vercel
npx turbo login
npx turbo link

# Configurar via variáveis de ambiente
TURBO_TEAM=your-team
TURBO_TOKEN=your-token

Melhores Práticas

✓ Dependências comuns na raiz
✓ tsconfig por pacote
✓ Pacotes internos com workspace:*
✓ Maximizar uso de cache

Resumo

Turborepo é uma ferramenta de build rápida para monorepos. Com cache e execução paralela, reduz significativamente o tempo de build.