Monorepositorio con TypeScript: organización de código para principiantes

Monorepositorio con TypeScript: organización de código para principiantes

El desarrollo de aplicaciones modernas en TypeScript a menudo requiere gestionar múltiples paquetes interrelacionados (por ejemplo, una biblioteca de componentes, un servicio backend y utilidades). En lugar de almacenar cada paquete en un repositorio separado (multirrepositorio), muchos equipos eligen un monorepositorio — un repositorio único que contiene todos los proyectos. En este artículo, analizaremos cómo organizar un monorepositorio con TypeScript, incluso si eres principiante.

¿Qué es un monorepositorio y por qué es necesario?

Un monorepositorio (monorepo) es un enfoque en el que el código de varios proyectos (paquetes, módulos) se almacena en un solo repositorio. Esto no significa que todos los proyectos se mezclen en un montón: permanecen lógicamente separados, pero bajo un mismo techo.

Ventajas para proyectos en TypeScript:

• Versión única de dependencias. Evitas la situación en la que diferentes paquetes usan diferentes versiones de TypeScript o de la misma biblioteca.
• Refactorización sencilla. El cambio de una interfaz o tipo común en un lugar se actualiza inmediatamente en todos los paquetes dependientes.
• Publicación simplificada. Las herramientas para monorepositorios (por ejemplo, Lerna o Nx) ayudan a publicar automáticamente solo los paquetes modificados.
• Configuraciones compartidas. Puedes tener un solo tsconfig.json para todos los paquetes, sobrescribiéndolo cuando sea necesario.

Herramientas para crear un monorepositorio

Para trabajar con un monorepositorio en TypeScript, existen varias herramientas populares:

• npm Workspaces — una funcionalidad integrada de npm a partir de la versión 7. Simple y eficaz.
• Yarn Workspaces — una función similar en el gestor de paquetes Yarn.
• Lerna — una herramienta clásica que a menudo se usa sobre npm o Yarn Workspaces.
• Nx — un potente sistema para monorepositorios con capacidades avanzadas de almacenamiento en caché y generación de código.
• Turborepo — una herramienta moderna de Vercel, centrada en la velocidad y la simplicidad.

En esta guía, usaremos npm Workspaces, ya que es la forma más simple que no requiere instalar herramientas globales adicionales.

Configuración paso a paso de un monorepositorio con TypeScript

1. Creación de la estructura raíz

Comience creando la carpeta raíz de su monorepositorio e inicializando package.json:

mkdir my-monorepocd my-monoreponpm init -y

Ahora edite el package.json raíz, agregando el campo workspaces. Esto le indicará a npm dónde buscar sus paquetes:

{  "name": "my-monorepo",  "private": true,  "workspaces": [    "packages/*"  ]}

La bandera "private": true evita la publicación accidental del paquete raíz en npm.

2. Creación de paquetes

Cree la estructura de carpetas para sus paquetes. Una estructura típica se ve así:

my-monorepo/├── packages/│   ├── utils/          # Utilidades comunes│   ├── ui/             # Biblioteca de componentes│   └── backend/        # Aplicación del servidor├── package.json└── tsconfig.json

Cree la carpeta packages y dentro de ella, las carpetas para cada paquete. Cada paquete debe tener su propio package.json. Por ejemplo, para el paquete utils:

mkdir -p packages/utilscd packages/utilsnpm init -y

Edite packages/utils/package.json, agregando el nombre y, posiblemente, la versión:

{  "name": "@my-project/utils",  "version": "1.0.0",  "main": "dist/index.js",  "types": "dist/index.