Apprenez à configurer un projet de thème Gatsby avec Lerna: ce guide vous aidera à comprendre ce qu’est un mono-référentiel et comment le gérer avec Lerna en utilisant NPM au lieu des Espaces de travail Yarn.

Index

  • Qu’est-ce que Lerna et pourquoi ça vaut le coup d’essayer?
  • Réglage de Lerna avec NPM à partir du shell
  • Dossiers et fichiers d’échafaudage avec shell
  • Utilisation de Lerna
    • Choisissez votre approche
  • Orchestrez tout avec Lerna bootstrap
  • Exécutez des commandes et des scripts
  • Assistant de mise à jour

Qu’est-ce que Lerna et pourquoi cela vaut-il la peine d’essayer?

J’ai commencé à suivre le cours de création de thème Gatsby de Jason Lengstorf (@jlengstorf) et j’ai vite réalisé que je ne connaissais rien aux « Espaces de travail de Yarn ». C’est une jolie façon de gérer ce qu’on appelle un mono-repo: un référentiel qui contient plusieurs projets et qui pourrait partager des dépendances.

Par doppelmutzi de doppelmutzi.github.io:

Ces projets sont appelés espaces de travail ou packages. En revanche, l’utilisation de plusieurs dépôts, chaque dépôt ne contenant qu’un seul projet, est appelée approche Multi-dépôts.

Une chose qui m’a étonné avec l’approche mono-repo était que mes Packages / Espaces de travail peuvent partager localement les mêmes dépendances node_modules. Cela me fait gagner du temps et de l’espace physique.

les espaces de travail lerna et yarn nous permettent de créer des bibliothèques et des applications en un seul dépôt sans nous obliger à publier sur npm ou d’autres registres. La beauté de ces technologies est qu’elles peuvent trouver des dépendances de paquets en analysant les paquets.fichiers json situés dans le dossier racine de chaque projet. Ainsi, ces outils rendent obsolète la création manuelle de liens symboliques ou l’utilisation directe de liens npm de « bas niveau ».

Maintenant, même si vous utilisez déjà yarn workspaces, je pense que Lerna vaut la peine d’essayer car il fournit une série d’avantages. En outre, vous pouvez utiliser Lerna avec des espaces de travail en fil:

avec une commande lerna, vous pouvez parcourir tous les paquets ou des paquets particuliers, en exécutant une série d’opérations (telles que linting, testing et building) sur chaque paquet. Ainsi, il complète les espaces de travail yarn qui prennent en charge le processus de gestion des dépendances.

J’ai donc finalement décidé d’apprendre Lerna – désolé pour le virelangue – mais je ne voulais pas passer au fil (car je suis juste à l’aise avec npm). Voici comment j’ai réussi à le faire fonctionner:

Définition de Lerna avec NPM à partir du shell

Créez un répertoire pour votre projet et entrez-le avec cette commande:

mkdir try-lernacd try-lerna

Vous pouvez installer Lerna globalement (npm i -g lerna) ou l’utiliser avec npx.

  • Init lerna

    npx lerna init --independent

Ce sera:

  • init un dépôt git
  • crée un package.json
  • crée un lerna.json
  • crée un dossier packages (ici vous pouvez placer vos espaces de travail).

Packages est la façon dont lerna appelle les espaces de travail.

Vous pouvez organiser les paquets comme vous le souhaitez, si vous préférez, vous pouvez placer tous les paquets dans le dossier racine, puis modifier le tableau afin de correspondre (comme une approche « espaces de travail yarn »).

Mon lerna.le fichier json a stream: true (afin de voir la sortie gatsby lors de l’exécution de develop avec lerna) et hoist: true (afin de hisser node_modules également avec la commande lerna add; Je vais expliquer cette dernière fonctionnalité en avant):

{ "packages":, "version":"independent", "stream":true, "command":{ "bootstrap":{ "hoist":true } }}

Vous pouvez l’ajouter manuellement ou utiliser cette commande shell simple:

echo "{\r\t\"packages\":,\r\t\"version\":\"independent\",\r\t\"stream\":true,\r\t\"command\":{\r\t\t\"bootstrap\":{\r\t\t\t\"hoist\":true\r\t\t}\r\t}\r}" > lerna.json 

Dossiers et fichiers d’échafaudage avec shell

Cette section peut être faite à la main en suivant la première leçon du cours de Jason Lengstorf liée à l’introduction.
Je collecte simplement tous les passages de base afin de les accomplir avec peu de commandes du shell.
Si vous souhaitez utiliser mon approche, n’oubliez pas de remplacer « NOM » par le nom de votre thème, puis copiez et collez simplement ces commandes:

mkdir -p packages/{gatsby-theme-NAME,site}
touch packages/{gatsby-theme-NAME,site}/{index.js,package.json}
echo "//loop" >> packages/{gatsby-theme-NAME,site}/index.js

Contenu initial pour le paquet.json sur le dossier du site:

echo "{\r\t\"private\":true,\r\t\"name\":\"site\",\r\t\"version\":\"1.0.0\",\r\t\"license\":\"MIT\",\r\t\"scripts\":{\r\t\t\"builds\":\"gatsby build\",\r\t\t\"develop\":\"gatsby develop\",\r\t\t\"clean\":\"gaysby clean\"\r\t}\r}" >> packages/site/package.json 

paquet.json sur le thème du dossier (remplacez à nouveau le NOM et insérez également YOUR_NPM_USER):

echo "{\r\t\"name\": \"@YOUR_NPM_USER/gatsby-theme-NAME\",\r\t\"version\": \"1.0.1\",\r\t\"license\": \"MIT\",\r\t\"main\": \"index.js\",\r\t\"scripts\": {\r\t\t\"builds\": \"gatsby build\",\r\t\t\"develop\": \"gatsby develop\",\r\t\t\"clean\": \"gaysby clean\"\r\t}\r}" >> packages/gatsby-theme-NAME/package.json 

Voici le résultat:

├── packages│ ├── site│ └── gatsby-theme-NAME├── .gitignore├── package.json└── lerna.json

PS : Je vous conseille de créer un .gitignore et d’ajouter node_modules tout de suite:

echo "node_modules" > .gitignore

En utilisant Lerna

Un problème avec Lerna est que vous ne pouvez pas installer plusieurs dépendances par paquet avec une seule commande (comme vous le faites avec yarn workspace name_workspace add package1 package2 etc). Vous devez le faire un par un, comme ceci (si vous ne l’avez pas installé globalement, vous devrez précéder chaque commande avec npx):

lerna add gatsby --scope site 
lerna add react --scope site
lerna add react-dom --scope site

Ici --scope site est utilisé pour dire à Lerna d’installer uniquement dans le package « site ».

Cependant, vous pouvez installer une dépendance, disons gatsby, pour chaque paquet avec une seule commande:

lerna add gatsby

Cette commande va:

  • Installez Gatsby pour chaque Package (donc dans ce cas pour le Site et aussi pour le package de thème).
  • Si vous avez activé hoist sur le lerna.json cela créera un dossier node_modules dans votre racine (voir ‘Lerna Bootstrap forward’):

Choisissez votre approche

Si vous aimez cette approche, vous pouvez continuer à installer toutes les dépendances communes (react, react-dom) sur les paquets. Si vous devez installer certaines dépendances uniquement pour un paquet, utilisez --scope name_of_the_package (rappelez-vous que c’est le nom spécifié sur le paquet.json pas le nom du dossier).

Vous pouvez également utiliser npm en installant toutes les dépendances de votre choix dans le package respectif. Mais rappelez-vous que cette approche installera des dépendances node_modules pour chaque dossier respectif. Cela pourrait être propre puis hissé par la suite. Bien que cette option soit valide, cela vous prendra plus de temps.

Quelle que soit l’option que vous choisissez, n’oubliez pas d’ajouter / de lier le package de thème local en tant que dépendance pour le package de site (utilisez le nom que vous avez défini package.json):

lerna add @YOUR_NPM_USER/gatsby-theme-NAME --scope=site

Orchestrez tout avec Lerna bootstrap

À la fin, vous pouvez le faire en toute sécurité:

lerna bootstrap 

Cette commande est vraiment utile, surtout si vous avez déjà votre paquet.json rempli de leurs dépendances respectives.

Avec l’option hoist: true (sur lerna.json), il placera un dossier partagé node_modules situé à la racine, puis il liera les dépendances locales dans leurs package.json respectives.

J’aime vraiment la fonctionnalitéhoisthoist c’est un processus qui évite les dépendances dupliquées sur les node_modules, ce qui permet d’économiser de l’espace physique et du temps d’installation.

Si, pour une raison quelconque, vous voulez nettoyer tout d’abord, vous pouvez le faire:

lerna clean && lerna link && lerna bootstrap 

Exécuter des commandes et des scripts

Pour exécuter des scripts (placés sur le package.json), vous devez spécifier (ou non) le paquet cible:

lerna run develop --scope Package_name

Lerna vous permet également d’exécuter toutes les commandes de la racine à chaque paquet (utilisez dash). Par exemple:

lerna exec -- rm -rf node_modules 

Cela supprimera les modules de nœuds sur chaque dossier de paquets.

Assistant de mise à jour

À l’avenir, lorsque vous aurez besoin de mettre à jour vos packages, vous pouvez utiliser l’assistant de mise à jour:

npm install --save-dev lerna-update-wizard

ensuite, vous devrez exécuter uniquement cette commande et l’assistant vous aidera:

lernaupdate