Frontend Academy · Lección

pnpm Workspaces para monorepos

Configure un workspace de pnpm con un pnpm-workspace.yaml raíz, eleve las dependencias compartidas y use el protocolo workspace: para enlazar paquetes locales.

pnpm Workspaces para monorepos es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Por qué pnpm?

pnpm (Performant npm) es un gestor de paquetes rápido y eficiente en el uso del disco. Almacena una única copia de cada paquete en un almacén global direccionado por contenido y crea enlaces hacia ella desde node_modules del proyecto. Misma dependencia en varios proyectos = una sola copia en el disco.

Velocidad y ahorro de espacio en disco

En un monorepo típico, las instalaciones con pnpm son entre 2 y 3 veces más rápidas que con npm/yarn y utilizan aproximadamente un 70 % menos de espacio en disco. La ventaja es enorme en monorepos con muchos paquetes.

Instalación de pnpm

Use Corepack (incluido con Node 16+) o instálelo globalmente.

# Corepack (recommended):
corepack enable
corepack prepare pnpm@latest --activate

# Or:
npm install -g pnpm

Configuración del workspace

Cree un pnpm-workspace.yaml en la raíz que incluya las carpetas que contienen paquetes.

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
  - '!**/test/**'

Estructura del proyecto

Cada aplicación y paquete tiene su propio package.json. La raíz tiene un package.json del workspace con devDeps compartidas.

my-monorepo/
  pnpm-workspace.yaml
  package.json         (root, private: true)
  apps/
    web/
      package.json
    docs/
      package.json
  packages/
    ui/
      package.json
    config-eslint/
      package.json

Instalación de dependencias

Ejecute pnpm install una vez en la raíz. pnpm instala todo en todos los paquetes y eleva las dependencias comunes.

pnpm install

# Install only in one workspace:
pnpm --filter web add react-router-dom

# Install dev dep at root:
pnpm add -Dw typescript prettier

Protocolo workspace:

Haga referencia a los paquetes internos con workspace:*. pnpm resuelve la referencia al paquete local; al publicar, la sustituye por una versión 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.

Ejecución de scripts en todos los paquetes

pnpm -r ejecuta un script en todos los paquetes. Use --filter para seleccionar 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] lint

Resolución estricta de dependencias

De forma predeterminada, pnpm usa enlaces simbólicos, de modo que un paquete solo puede ver las dependencias que ha declarado explícitamente en su package.json. No hay filtraciones accidentales entre paquetes, un error que tanto npm como yarn classic permiten.

Patrones de hoisting

De forma predeterminada, pnpm no hace hoisting. Si una dependencia transitiva debe estar disponible (por ejemplo, un TypeScript global), añada a .npmrc: shamefully-hoist=true (evítelo si es posible) o use un public-hoist-pattern específico.

Actualización de dependencias

pnpm update actualiza dentro de los rangos de semver. pnpm update -L actualiza a la última versión (ignorando el caret).

pnpm update                      # update all
pnpm --filter web update react   # only react, only web
pnpm update -L                   # latest (ignore caret)

Combinación con Turborepo

pnpm proporciona el workspace y la instalación; Turborepo proporciona la orquestación de tareas y la caché. Se complementan perfectamente: la mayoría de los monorepos de JS usan ambos.

# pnpm install dependencies
pnpm install

# Turborepo runs the tasks across the workspace:
pnpm turbo run build --filter=web...

Consejos para CI

Almacene en caché el almacén de pnpm direccionado por contenido (~/.local/share/pnpm/store) para acelerar la CI. Use --frozen-lockfile para que falle si pnpm-lock.yaml tuviera que cambiar.

# .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 build

Comprobación rápida

¿Cuál es la principal ventaja de pnpm sobre npm/yarn en cuanto al espacio en disco en un monorepo?

Repaso: workspaces de pnpm

Un único almacén direccionado por contenido + enlaces simbólicos = instalaciones rápidas y aproximadamente un 70 % menos de espacio en disco. pnpm-workspace.yaml enumera las carpetas de los paquetes. El protocolo workspace:* sirve para las dependencias internas. pnpm -r ejecuta scripts en todos los paquetes; --filter permite seleccionar subconjuntos. La resolución estricta evita dependencias filtradas. Combínelo con Turborepo para la orquestación de tareas. Use --frozen-lockfile en la CI.

Preguntas frecuentes

¿La lección «pnpm Workspaces para monorepos» es gratis?

Sí — el texto completo de «pnpm Workspaces para monorepos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «pnpm Workspaces para monorepos»?

Configure un workspace de pnpm con un pnpm-workspace.yaml raíz, eleve las dependencias compartidas y use el protocolo workspace: para enlazar paquetes locales. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «pnpm Workspaces para monorepos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Frontend Academy