Monorepo avec JavaScript : organisation du code pour débutants

Monorepo avec JavaScript : organisation du code pour débutants

Avec la croissance d'un projet et l'apparition d'une logique commune à réutiliser dans différentes parties de l'application, les développeurs sont confrontés au problème de l'organisation du code. Beaucoup commencent à copier des fichiers, à créer des packages npm séparés ou des modules complexes. La solution à ce problème est le monorepo. Dans cet article, nous allons voir ce qu'est un monorepo, pourquoi il est utile dans l'écosystème JavaScript (Node.js) et comment le configurer à l'aide d'outils populaires. Cet article est destiné aux développeurs débutants qui connaissent déjà les bases de Node.js et de npm.

Qu'est-ce qu'un monorepo et pourquoi en a-t-on besoin ?

Un monorepo est une approche d'organisation du code où tous les projets, bibliothèques et services sont stockés dans un seul dépôt (par exemple, sur GitHub). Contrairement au multirepo, où chaque projet possède son propre dépôt, le monorepo regroupe tout au même endroit.

Principaux avantages :

• Contrôle de version unifié : Il est plus facile de gérer les modifications qui affectent plusieurs packages.
• Réutilisation du code : Les utilitaires, types et configurations communs sont à proximité et ne nécessitent pas de publication sur npm.
• Simplification du refactoring : Les modifications dans un package sont automatiquement testées avec les autres.
• Build et tests unifiés : Vous pouvez lancer les tests pour tous les packages avec une seule commande.

Cependant, le monorepo a aussi des inconvénients : il peut devenir trop volumineux et la gestion des dépendances peut devenir complexe. Pour résoudre ces problèmes, il existe des outils spécialisés.

Outils pour travailler avec un monorepo en JavaScript

Dans l'écosystème Node.js, il existe plusieurs outils populaires pour gérer un monorepo. Nous allons examiner les deux plus courants : NPM Workspaces (intégré à npm) et Lerna.

NPM Workspaces

Depuis la version npm 7, une prise en charge intégrée des monorepos est disponible via workspaces. C'est un moyen simple et léger d'organiser le code sans installer de packages supplémentaires.

Pour la configuration, il suffit de créer un package.json racine et d'y indiquer les dossiers contenant les packages :

// package.json (racine){  "name": "my-monorepo",  "private": true,  "workspaces": [    "packages/*"  ]}

Créez ensuite la structure de dossiers :

my-monorepo/├── package.json├── packages/│   ├── utils/│   │   ├── package.json│   │   └── index.js│   └── app/│       ├── package.json│       └── index.js

Maintenant, si le package app dépend de utils, vous pouvez simplement l'indiquer dans ses dépendances :

// packages/app/package.json{  "name": "@my/app",  "dependencies": {    "@my/utils": "*"  }}

Après avoir exécuté npm install à la racine du projet, npm créera des liens symboliques entre les packages. Cela signifie que vous pouvez développer les deux packages simultanément, et les modifications dans utils seront immédiatement disponibles dans app.

Lerna

Lerna est un outil plus puissant, souvent utilisé avec NPM Workspaces ou Yarn Workspaces. Il ajoute des fonctionnalités pour la publication de packages, la gestion des versions et l'exécution de commandes dans tous les packages.

Installation de Lerna :

npm install -g lerna

Création de la configuration :

lerna init

Cela créera un fichier lerna.json et une structure de base. Exemple de configuration :

// lerna.json{  "version": "0.0.0",  "packages": ["packages/*"],  "npmClient": "npm"}

Lerna permet d'exécuter des commandes dans tous les packages :

lerna run testlerna run build

Et aussi de gérer les versions des packages