TypeScript Academy · Aula

Workspaces pnpm com TypeScript

Configure um monorepo com pnpm e um tsconfig compartilhado

Workspaces pnpm com TypeScript é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

O que são espaços de trabalho do pnpm

Os espaços de trabalho do pnpm permitem gerenciar vários pacotes em um único repositório, com uma estrutura compartilhada de node_modules, reduzindo o uso de disco e possibilitando importações entre pacotes.

# pnpm-workspace.yaml
packages:
  - "packages/*"
  - "apps/*"

Criando a estrutura do espaço de trabalho

Um monorrepositório típico do pnpm tem packages/ para bibliotecas compartilhadas e apps/ para aplicativos implantáveis.

monorepo/
├── pnpm-workspace.yaml
├── package.json          # root
├── packages/
│   ├── core/             # shared logic
│   └── ui/               # shared components
└── apps/
    └── web/              # Next.js app

tsconfig.json da raiz

O tsconfig da raiz define as opções básicas e referencia todos os pacotes do espaço de trabalho.

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler"
  },
  "references": [
    { "path": "packages/core" },
    { "path": "packages/ui" },
    { "path": "apps/web" }
  ]
}

tsconfig no nível do pacote

Cada pacote estende a configuração da raiz e define seu próprio composite e outDir.

// packages/core/tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Instalando dependências entre pacotes

Use pnpm add com o protocolo de espaço de trabalho para vincular pacotes dentro do monorrepositório.

# Add @myapp/core to apps/web
pnpm add @myapp/core --workspace --filter apps/web

# package.json entry:
# "@myapp/core": "workspace:*"

Resolução de caminhos do TypeScript

Adicione aliases de paths no tsconfig da raiz para que o TypeScript resolva os pacotes do espaço de trabalho para o código-fonte durante o desenvolvimento.

{
  "compilerOptions": {
    "paths": {
      "@myapp/core": ["./packages/core/src/index.ts"],
      "@myapp/ui": ["./packages/ui/src/index.ts"]
    }
  }
}

Compilando todos os pacotes

Use tsc --build a partir da raiz para compilar todos os pacotes compostos na ordem das dependências.

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

Executando scripts entre pacotes

pnpm -r (recursivo) ou --filter executa scripts em todos os pacotes correspondentes.

# Run tests in all packages
pnpm -r test

# Run only in packages/core
pnpm --filter @myapp/core test

Configuração compartilhada do ESLint e do Prettier

Mantenha as configurações de verificação de código em um pacote compartilhado e estenda-as em cada pacote para garantir um estilo de código consistente em todo o monorrepositório.

// packages/eslint-config/index.js
module.exports = { extends: ["airbnb-typescript"], ... };

Integração com o Turborepo

Adicione o Turborepo para armazenar em cache e paralelizar tarefas de compilação/teste/verificação de código, usando o grafo do espaço de trabalho do pnpm para ordenar as dependências.

npx create-turbo@latest
# or add to existing monorepo:
pnpm add turbo -w

Recapitulação: espaços de trabalho do pnpm com TypeScript

Os espaços de trabalho do pnpm + as referências de projetos do TypeScript criam uma configuração poderosa de monorrepositório: node_modules compartilhado, importações entre pacotes por meio de workspace:* e compilações rápidas com tsc --build.

Verificação rápida

Qual arquivo define quais diretórios são pacotes do espaço de trabalho do pnpm?

O que você aprendeu

Os espaços de trabalho do pnpm com referências de projetos do TypeScript proporcionam um monorrepositório eficiente, com node_modules compartilhado, vinculação entre pacotes pelo protocolo de espaço de trabalho e compilações incrementais. Adicione o Turborepo para obter armazenamento em cache e paralelização.

Perguntas Frequentes

A aula “Workspaces pnpm com TypeScript” é grátis?

Sim — o texto completo de “Workspaces pnpm com TypeScript” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.

O que vou aprender em “Workspaces pnpm com TypeScript”?

Configure um monorepo com pnpm e um tsconfig compartilhado Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Workspaces pnpm com TypeScript”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Referências de projetos TypeScript explicadas
Workspaces pnpm com TypeScript
Estratégia para um pacote de tipos compartilhados
Compilações incrementais e cache em monorepos

← Voltar para TypeScript Academy