Workspaces pnpm para monorepos
Configurar um workspace pnpm com um pnpm-workspace.yaml na raiz, elevar dependências partilhadas e utilizar o protocolo workspace: para ligar pacotes locais.
Workspaces pnpm para monorepos é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que pnpm?
pnpm (Performant npm) é um gerenciador de pacotes rápido e econômico em disco. Ele armazena uma única cópia de cada pacote em um armazenamento global endereçável por conteúdo e cria links para ela a partir de node_modules do projeto. Mesma dependência, vários projetos = uma cópia no disco.
Velocidade e economia de disco
Em um monorepo típico, as instalações do pnpm são de 2 a 3 vezes mais rápidas que as do npm/yarn e usam cerca de 70% menos espaço em disco. Os ganhos são enormes em monorepos com muitos pacotes.
Instalando o pnpm
Use o Corepack (incluído no Node 16+) ou instale globalmente.
# Corepack (recommended):
corepack enable
corepack prepare pnpm@latest --activate
# Or:
npm install -g pnpmConfiguração do workspace
Crie um pnpm-workspace.yaml na raiz, listando as pastas que contêm pacotes.
# pnpm-workspace.yaml
packages:
- 'apps/*'
- 'packages/*'
- '!**/test/**'Estrutura do projeto
Cada aplicativo e pacote tem seu próprio package.json. A raiz tem um package.json do workspace com devDeps compartilhadas.
my-monorepo/
pnpm-workspace.yaml
package.json (root, private: true)
apps/
web/
package.json
docs/
package.json
packages/
ui/
package.json
config-eslint/
package.jsonInstalando dependências
Execute pnpm install uma vez na raiz. O pnpm instala tudo em todos os pacotes, promovendo as dependências comuns.
pnpm install
# Install only in one workspace:
pnpm --filter web add react-router-dom
# Install dev dep at root:
pnpm add -Dw typescript prettierProtocolo workspace:
Faça referência a pacotes internos com workspace:*. O pnpm resolve para o pacote local; ao publicar, substitui por uma versão real.
// apps/web/package.json
{
"dependencies": {
"@repo/ui": "workspace:*",
"@repo/utils": "workspace:^1.0.0"
}
}
// On publish, workspace:* becomes the actual version of @repo/ui.Executando scripts em todos os pacotes
pnpm -r executa um script em todos os pacotes. Use --filter para subconjuntos.
# Run build in every package:
pnpm -r build
# Only in web and its deps:
pnpm --filter web... build
# Run lint in changed packages since main:
pnpm --filter ...[origin/main] lintResolução estrita de dependências
Por padrão, o pnpm usa links simbólicos, portanto um pacote só consegue acessar as dependências que listou explicitamente em seu package.json. Não há vazamento acidental entre pacotes — um erro que tanto o npm quanto o yarn clássico permitem.
Padrões de elevação
Por padrão, o pnpm não eleva nada. Se uma dependência transitiva precisar estar acessível (por exemplo, um TypeScript global), adicione ao .npmrc: shamefully-hoist=true (evite se possível) ou use um public-hoist-pattern específico.
Atualizando dependências
pnpm update atualiza dentro dos intervalos semver. pnpm update -L atualiza para a versão mais recente (ignorando o acento circunflexo).
pnpm update # update all
pnpm --filter web update react # only react, only web
pnpm update -L # latest (ignore caret)Combinando com o Turborepo
O pnpm fornece workspace + instalação; o Turborepo fornece orquestração de tarefas + armazenamento em cache. Eles formam uma combinação perfeita — a maioria dos monorepos de JS usa ambos.
# pnpm install dependencies
pnpm install
# Turborepo runs the tasks across the workspace:
pnpm turbo run build --filter=web...Dicas para CI
Armazene em cache o armazenamento endereçável por conteúdo do pnpm (~/.local/share/pnpm/store) para acelerar a CI. Use --frozen-lockfile para falhar caso o pnpm-lock.yaml fosse alterado.
# .github/workflows/ci.yml
- uses: pnpm/action-setup@v3
with: { version: 9 }
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'pnpm' }
- run: pnpm install --frozen-lockfile
- run: pnpm -r buildVerificação rápida
Qual é a principal vantagem do pnpm sobre npm/yarn em relação ao espaço em disco em um monorepo?
Recapitulação: workspaces do pnpm
Um único armazenamento endereçável por conteúdo + links simbólicos = instalações rápidas e cerca de 70% menos espaço em disco. pnpm-workspace.yaml lista as pastas de pacotes. O protocolo workspace:* é usado para dependências internas. pnpm -r executa scripts em todos os pacotes; --filter é usado para subconjuntos. A resolução estrita impede o vazamento de dependências. Combine com o Turborepo para orquestração de tarefas. Use --frozen-lockfile na CI.
Perguntas Frequentes
A aula “Workspaces pnpm para monorepos” é grátis?
Sim — o texto completo de “Workspaces pnpm para monorepos” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Workspaces pnpm para monorepos”?
Configurar um workspace pnpm com um pnpm-workspace.yaml na raiz, elevar dependências partilhadas e utilizar o protocolo workspace: para ligar pacotes locais. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 3 de 4.
Quanto tempo leva a aula “Workspaces pnpm para monorepos”?
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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Vite: sistema de plugins e modo SSR
- esbuild: velocidade e limitações
- Workspaces pnpm para monorepos
- Turbo: armazenamento em cache e pipelines de tarefas