Frontend Academy · Leçon

Configuration d’un monorepo avec Turborepo

Organisez plusieurs applications et paquets partagés dans un même dépôt, définissez un pipeline Turbo et mettez les compilations en cache pour ne reconstruire que ce qui a changé.

Leçon 2 sur 414 étapes

Configuration d’un monorepo avec Turborepo est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Qu’est-ce qu’un dépôt unique

Un dépôt Git unique qui héberge plusieurs projets (applications, bibliothèques) partageant du code. Exemples : application web + application mobile + bibliothèque d’interface partagée + utilitaires partagés dans un même dépôt. Partage de code facilité, changements transversaux atomiques et chaîne d’intégration continue unique.

Pourquoi Turborepo

Turborepo est un système de compilation haute performance pour les dépôts uniques JavaScript. Il met en cache les résultats des tâches, les exécute en parallèle et ne recompile que ce qui a changé. Il est conçu par Vercel.

Configurer Turborepo

Utilisez le modèle de démarrage officiel.

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 avec des espaces de travail

Le fichier package.json racine déclare les espaces de travail — npm/yarn/pnpm créent des liens symboliques vers ceux-ci afin que les applications puissent importer les paquets par leur nom.

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

turbo.json — la chaîne d’exécution

Définissez les tâches (compilation, analyse de code, vérification et développement) ainsi que leurs dépendances entre les paquets.

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {},
    "test": { "dependsOn": ["^build"] },
    "dev": { "cache": false, "persistent": true }
  }
}

Explication de dependsOn

^build signifie que, avant de compiler ce paquet, il faut compiler toutes ses dépendances d’espace de travail. Ainsi, si app/web dépend de packages/ui, ui est compilé en premier.

Exécuter les tâches

Exécutez une tâche dans tout le dépôt unique. Turbo les exécute dans l’ordre topologique avec parallélisme.

# 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 test

Mise en cache des résultats

Turbo calcule les hachages des entrées (fichiers sources + dépendances + environnement) et met les sorties en cache. Une nouvelle exécution sans changement est instantanée — Turbo rejoue la sortie mise en cache sans réexécuter la tâche.

Mise en cache distante

Envoyez le cache vers un service distant (Vercel Remote Cache ou service auto-hébergé) afin que les machines de CI et les coéquipiers le partagent — le premier développeur qui compile en paie le coût, tous les autres obtiennent une correspondance dans le cache.

npx turbo login
npx turbo link

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

Filtrer avec --filter

Exécutez une tâche uniquement pour les paquets correspondants.

# 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=docs

Paquets internes

Les paquets dans packages/ s’importent mutuellement par leur nom. Référencez-les dans les dépendances comme "@repo/ui": "*" (avec 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';

Conseils pour la CI

Utilisez turbo run build --filter=...[origin/main] dans la CI pour compiler uniquement ce qui a changé depuis la branche principale. Associées au cache distant, les compilations passent de minutes à secondes pour les paquets inchangés.

Vérification rapide

Que signifie l’entrée ^build dans le tableau dependsOn d’une tâche Turbo ?

Réponds-y dans la leçon interactive

Récapitulatif : Turborepo

Système de dépôt unique JavaScript : structure apps/ + packages/ avec espaces de travail. turbo.json définit les tâches et les relations dependsOn. ^build = compiler d’abord les dépendances. Le cache local fondé sur les hachages rend instantanées les tâches répétées. Le cache distant partage les résultats entre l’équipe et la CI. --filter cible des sous-ensembles. Utilisez changed-since pour une CI rapide des PR.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 41
Leçons: 163

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Configuration d’un monorepo avec Turborepo » est-elle gratuite ?

Oui — le texte complet de « Configuration d’un monorepo avec Turborepo » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Configuration d’un monorepo avec Turborepo » ?

Organisez plusieurs applications et paquets partagés dans un même dépôt, définissez un pipeline Turbo et mettez les compilations en cache pour ne reconstruire que ce qui a changé. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Configuration d’un monorepo avec Turborepo » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Design atomique : atomes, molécules et organismes
Configuration d’un monorepo avec Turborepo
Micro-frontends : fédération de modules
Structure de dossiers par fonctionnalité

← Retour à Frontend Academy