L'un des plus grands atouts de notre monorepo est la capacité d'isoler le code réutilisable dans des "packages". Prenons l'exemple de notre dossier packages/ui qui contient nos composants graphiques partagés.
Au lieu de copier-coller des boutons et des champs de texte d'un projet à l'autre, nous les centralisons ici. Voici comment cela fonctionne sous le capot :
Le package UI est situé dans packages/ui. Il contient ses propres configurations (package.json, tsconfig.json) et son code source dans src/. C'est un mini-projet indépendant au sein du monorepo.
Le fichier package.json de @workspace/ui définit ce qui est accessible depuis l'extérieur via le champ exports. Par exemple, ./components/* pointe vers ./src/components/*.tsx.
Pour utiliser le package dans apps/web, on l'ajoute aux dépendances : "@workspace/ui": "workspace:*". Le protocole workspace:* assure qu'on utilise toujours la version locale la plus récente.
Une fois lié, vous pouvez importer les composants comme s'il s'agissait d'une librairie externe npm : import { Button } from "@workspace/ui/components/button".
// packages/ui/package.json
{
"name": "@workspace/ui",
"exports": {
"./components/*": "./src/components/*.tsx",
"./lib/*": "./src/lib/*.ts"
}
}Grâce à cette configuration, TypeScript et Node.js savent exactement où trouver le code lorsque vous faites un import.