Configuración de un monorepo con Turborepo
Organice varias aplicaciones y paquetes compartidos en un único repositorio, defina un pipeline de Turbo y almacene las compilaciones en caché para recompilar solo lo que haya cambiado.
Configuración de un monorepo con Turborepo es una lección gratuita de Frontend 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 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.
¿Qué es un monorepo?
Un único repositorio de Git que contiene varios proyectos (aplicaciones y bibliotecas) que comparten código. Por ejemplo: una aplicación web, una aplicación móvil, una biblioteca de UI compartida y utilidades compartidas en un mismo repositorio. Facilita compartir código, realizar cambios transversales atómicos y usar una única canalización de CI.
¿Por qué Turborepo?
Turborepo es un sistema de compilación de alto rendimiento para monorepos de JavaScript. Almacena en caché los resultados de las tareas, las ejecuta en paralelo entre paquetes y solo vuelve a compilar lo que ha cambiado. Vercel lo desarrolló.
Configurar Turborepo
Use el starter oficial.
npx create-turbo@latest my-monorepo
cd my-monorepo
# Structure:
# apps/
# web/ (Next.js app)
# docs/ (another Next.js app)
# packages/
# ui/ (shared component library)
# eslint-config/
# tsconfig/package.json con Workspaces
El package.json raíz declara los workspaces; npm/yarn/pnpm crea enlaces simbólicos hacia ellos para que las aplicaciones puedan importar los paquetes por su nombre.
{
"name": "my-monorepo",
"private": true,
"workspaces": ["apps/*", "packages/*"],
"devDependencies": {
"turbo": "latest"
}
}turbo.json: la canalización
Defina las tareas (build, lint, test y dev) y sus dependencias entre paquetes.
// turbo.json
{
"$schema": "https://turbo.build/schema.json",
"tasks": {
"build": {
"dependsOn": ["^build"],
"outputs": [".next/**", "dist/**"]
},
"lint": {},
"test": { "dependsOn": ["^build"] },
"dev": { "cache": false, "persistent": true }
}
}Explicación de dependsOn
^build significa que, antes de compilar este paquete, se compilan todas sus dependencias del workspace. Por tanto, si app/web depende de packages/ui, ui se compila primero.
Ejecutar tareas
Ejecute una tarea en todo el monorepo. Turbo se ejecuta en orden topológico y en paralelo.
# Build everything:
npx turbo run build
# Build only one app and its deps:
npx turbo run build --filter=web
# Run dev mode (persistent, no cache):
npx turbo run dev
# Lint and test in parallel:
npx turbo run lint testAlmacenar resultados en caché
Turbo calcula hashes de las entradas (archivos de código fuente, dependencias y entorno) y almacena los resultados en caché. Si vuelve a ejecutarlo sin cambios, el resultado es instantáneo: Turbo reproduce el resultado almacenado sin volver a ejecutar la tarea.
Caché remota
Envíe la caché a un servicio remoto (Vercel Remote Cache o uno autogestionado) para que las máquinas de CI y sus compañeros de equipo la compartan: el primer desarrollador que compila asume el coste y los demás obtienen un acierto de caché.
npx turbo login
npx turbo link
# In CI:
env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
TURBO_TEAM: yourteamFiltrar con --filter
Ejecute una tarea únicamente para los paquetes que coincidan.
# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'
# Run build for web and everything it depends on:
npx turbo run build --filter=web...
# Run dev for the docs app only:
npx turbo run dev --filter=docsPaquetes internos
Los paquetes de packages/ se importan entre sí por nombre. Declárelos en las dependencias como "@repo/ui": "*" (con pnpm: workspace:*).
// apps/web/package.json
{
"dependencies": {
"@repo/ui": "*",
"@repo/utils": "*"
}
}
// apps/web/app/page.tsx
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';Consejos para CI
Use turbo run build --filter=...[origin/main] en CI para compilar únicamente lo que haya cambiado desde la rama principal. Combinado con la caché remota, el tiempo de compilación de los paquetes sin cambios se reduce de minutos a segundos.
Comprobación rápida
¿Qué significa la entrada ^build del array dependsOn de una tarea de Turbo?
Resumen: Turborepo
Sistema de monorepo para JavaScript: estructura apps/ + packages/ con workspaces. turbo.json define las tareas y las relaciones dependsOn. ^build = compilar primero las dependencias. La caché local basada en hashes hace que el trabajo repetido sea instantáneo. La caché remota comparte los aciertos entre el equipo y CI. --filter permite seleccionar subconjuntos. Use changed-since para acelerar la CI de las solicitudes de incorporación de cambios.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Configuración de un monorepo con Turborepo» es gratis?
Sí — el texto completo de «Configuración de un monorepo con Turborepo» 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 «Configuración de un monorepo con Turborepo»?
Organice varias aplicaciones y paquetes compartidos en un único repositorio, defina un pipeline de Turbo y almacene las compilaciones en caché para recompilar solo lo que haya cambiado. 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 2 de 4.
¿Cuánto tiempo toma la lección «Configuración de un monorepo con Turborepo»?
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
- Atomic Design: átomos, moléculas y organismos
- Configuración de un monorepo con Turborepo
- Microfrontends: Module Federation
- Estructura de carpetas basada en funcionalidades