0Pricing
TypeScript Academy · Lección

Espacios de trabajo pnpm con TypeScript

Configure un monorepo con pnpm y un tsconfig compartido.

Espacios de trabajo pnpm con TypeScript es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 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 TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué son los workspaces de pnpm?

Los workspaces de pnpm permiten administrar varios paquetes en un solo repositorio con una estructura compartida de node_modules, lo que reduce el uso de disco y permite realizar imports entre paquetes.

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

Creación de la estructura del workspace

Un monorepo típico de pnpm tiene packages/ para las bibliotecas compartidas y apps/ para las aplicaciones desplegables.

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

tsconfig.json raíz

El tsconfig raíz establece las opciones base y referencia todos los paquetes del workspace.

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

tsconfig a nivel de paquete

Cada paquete extiende la configuración raíz y establece sus propios valores de composite y outDir.

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

Instalación de dependencias entre paquetes

Use pnpm add con el protocolo de workspace para vincular los paquetes dentro del monorepo.

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

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

Resolución de rutas de TypeScript

Añada alias de paths en el tsconfig raíz para que TypeScript resuelva los paquetes del workspace hacia su código fuente durante el desarrollo.

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

Compilación de todos los paquetes

Use tsc --build desde la raíz para compilar todos los paquetes compuestos en el orden de sus dependencias.

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

Ejecución de scripts en varios paquetes

pnpm -r (recursivo) o --filter ejecuta scripts en todos los paquetes que coincidan.

# Run tests in all packages
pnpm -r test

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

Configuración compartida de ESLint y Prettier

Mantenga las configuraciones de linting en un paquete compartido y extiéndalas en cada paquete para garantizar un estilo de código uniforme en todo el monorepo.

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

Integración con Turborepo

Añada Turborepo para almacenar en caché y ejecutar en paralelo las tareas de compilación, pruebas y linting, usando el grafo del workspace de pnpm para ordenar las dependencias.

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

Resumen: workspaces de pnpm con TypeScript

Los workspaces de pnpm y las referencias de proyectos de TypeScript crean una configuración de monorepo eficaz: node_modules compartido, imports entre paquetes mediante workspace:* y compilaciones rápidas con tsc --build.

Comprobación rápida

¿Qué archivo define qué directorios son paquetes del workspace de pnpm?

Lo que ha aprendido

Los workspaces de pnpm con referencias de proyectos de TypeScript proporcionan un monorepo eficiente con node_modules compartido, vinculación entre paquetes mediante el protocolo de workspace y compilaciones incrementales. Añada Turborepo para el almacenamiento en caché y la ejecución en paralelo.

Preguntas frecuentes

¿La lección «Espacios de trabajo pnpm con TypeScript» es gratis?

Sí — el texto completo de «Espacios de trabajo pnpm con TypeScript» 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 TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Espacios de trabajo pnpm con TypeScript»?

Configure un monorepo con pnpm y un tsconfig compartido. Practicas TypeScript 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 TypeScript Academy?

No se requiere experiencia previa. TypeScript 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 2 de 4.

¿Cuánto tiempo toma la lección «Espacios de trabajo pnpm con TypeScript»?

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 TypeScript Academy?

Sí. Cada lección de TypeScript 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

  1. Explicación de las referencias de proyectos de TypeScript
  2. Espacios de trabajo pnpm con TypeScript
  3. Estrategia para un paquete de tipos compartidos
  4. Compilaciones incrementales y caché en monorepos
← Volver a TypeScript Academy