Monorepo avec TypeScript : organisation du code pour débutants

Monorepo avec TypeScript : organisation du code pour débutants

Le développement d'applications modernes en TypeScript nécessite souvent la gestion de plusieurs paquets interdépendants (par exemple, une bibliothèque de composants, un service backend et des utilitaires). Au lieu de stocker chaque paquet dans un dépôt séparé (multirepo), de nombreuses équipes choisissent le monorepo — un dépôt unique contenant tous les projets. Dans cet article, nous allons voir comment organiser un monorepo avec TypeScript, même si vous êtes débutant.

Qu'est-ce qu'un monorepo et pourquoi en utiliser un ?

Un monorepo est une approche où le code de plusieurs projets (paquets, modules) est stocké dans un seul dépôt. Cela ne signifie pas que tous les projets sont fusionnés en un seul tas : ils restent logiquement séparés, mais se trouvent sous un même toit.

Avantages pour les projets TypeScript :

• Version unique des dépendances. Vous évitez les situations où différents paquets utilisent différentes versions de TypeScript ou d'une même bibliothèque.
• Refactorisation simplifiée. La modification d'une interface ou d'un type commun à un seul endroit est immédiatement mise à jour dans tous les paquets dépendants.
• Publication simplifiée. Les outils pour monorepo (par exemple, Lerna ou Nx) aident à publier automatiquement uniquement les paquets modifiés.
• Paramètres partagés. Vous pouvez avoir un seul tsconfig.json pour tous les paquets, en le redéfinissant si nécessaire.

Outils pour créer un monorepo

Pour travailler avec un monorepo en TypeScript, il existe plusieurs outils populaires :

• npm Workspaces — une fonctionnalité intégrée de npm depuis la version 7. Simple et efficace.
• Yarn Workspaces — une fonctionnalité similaire dans le gestionnaire de paquets Yarn.
• Lerna — un outil classique, souvent utilisé en complément de npm ou Yarn Workspaces.
• Nx — un système puissant pour les monorepos avec des capacités avancées de mise en cache et de génération de code.
• Turborepo — un outil moderne de Vercel, axé sur la rapidité et la simplicité.

Dans ce guide, nous utiliserons npm Workspaces, car c'est la méthode la plus simple qui ne nécessite pas l'installation d'outils globaux supplémentaires.

Configuration pas à pas d'un monorepo avec TypeScript

1. Création de la structure racine

Commencez par créer le dossier racine de votre monorepo et initialisez package.json :

mkdir my-monorepocd my-monoreponpm init -y

Modifiez maintenant le package.json racine en ajoutant le champ workspaces. Cela indique à npm où chercher vos paquets :

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

Le flag "private": true empêche la publication accidentelle du paquet racine sur npm.

2. Création des paquets

Créez la structure de dossiers pour vos paquets. Une structure typique ressemble à ceci :

my-monorepo/├── packages/│   ├── utils/          # Utilitaires communs│   ├── ui/             # Bibliothèque de composants│   └── backend/        # Application serveur├── package.json└── tsconfig.json

Créez le dossier packages et, à l'intérieur, les dossiers pour chaque paquet. Chaque paquet doit avoir son propre package.json. Par exemple, pour le paquet utils :

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

Modifiez packages/utils/package.json en ajoutant le nom et éventuellement la version :

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