Espaces de travail Yarn : organisez la base de code de votre projet comme un pro

Chaque fois que je commence à travailler sur un nouveau projet, je me demande : « Dois-je utiliser des référentiels git distincts pour mon serveur principal et mes clients frontaux ? Quelle est la meilleure façon d'organiser la base de code ? »

J'ai eu cette même question après quelques mois de travail sur mon site personnel. J'avais à l'origine tout le code dans le même référentiel : le back-end utilisait Node.js et le front-end utilisait ES6 avec Pug. J'ai adopté cette organisation pour plus de commodité, car le fait d'avoir les deux projets dans le même référentiel facilitait la recherche de fonctions et de classes, et facilitait les refactorisations. Cependant, j'ai trouvé quelques points négatifs :

• Aucun déploiement indépendant.
  Les deux applications utilisaient le même package.json , et il n'y avait pas de séparation claire sur les deux projets.
• Limites peu claires.
  Comme je m'appuie sur un global package.json , je n'avais pas de mécanisme pour définir des versions spécifiques pour le back-end et le front-end.
• Utilitaires et code partagés sans versioning.

Après quelques recherches, j'ai trouvé que les espaces de travail Yarn étaient un excellent outil pour résoudre ces inconvénients, et c'était un outil utile pour créer un projet monorepo (plus à venir plus tard !).

Dans cet article, je partage une introduction aux espaces de travail Yarn. Nous allons parcourir ensemble un didacticiel sur la façon de créer votre premier projet avec, et nous terminerons par un récapitulatif et les prochaines étapes.

Que sont les espaces de travail Yarn ?

Yarn est un gestionnaire de packages par les gens de Facebook, et il a une fonctionnalité intéressante appelée espaces de travail Yarn. Les espaces de travail Yarn vous permettent d'organiser la base de code de votre projet à l'aide d'un référentiel monolithique (monorepo). L'idée est qu'un seul référentiel contiendrait plusieurs packages. Les packages sont isolés et pourraient vivre indépendamment du projet plus vaste.

Comme alternative, nous pourrions placer tous ces packages dans des référentiels séparés. Malheureusement, cette approche affecte la partageabilité, l'efficacité et l'expérience des développeurs lors du développement sur les packages et leurs projets dépendants. De plus, lorsque nous travaillons dans un référentiel unique, nous pouvons évoluer plus rapidement et créer des outils plus spécifiques pour améliorer les processus tout au long du cycle de vie du développement.

Les projets Monorepo ont été largement acceptés par de grandes entreprises comme Google ou Facebook, et ils ont prouvé que le monorepo peut évoluer.

"

React est un bon exemple de projet open source monorepo. De plus, React utilise des espaces de travail Yarn pour atteindre cet objectif. Dans la section suivante, nous apprendrons comment créer notre premier projet monorepo avec Yarn.

Création d'un projet Monorepo avec React et Express à l'aide d'espaces de travail Yarn en six étapes

Jusqu'à présent, nous avons appris ce qu'est Yarn, ce qu'est un monorepo et pourquoi Yarn est un excellent outil pour créer un monorepo. Apprenons maintenant à partir de zéro comment configurer un nouveau projet à l'aide des espaces de travail Yarn. Pour suivre, vous aurez besoin d'un environnement de travail avec une installation npm à jour. Téléchargez le code source.

Conditions préalables

Pour terminer complètement ce didacticiel, vous devez avoir installé Yarn sur votre machine. Si vous n'avez pas encore installé Yarn, veuillez suivre ces instructions.

Voici les étapes que nous suivrons dans ce tutoriel :

1. Créez votre projet et votre espace de travail racine
2. Créez un projet React et ajoutez-le à la liste des espaces de travail
3. Créer un projet express et l'ajouter à l'espace de travail
4. Installez toutes les dépendances et dites bonjour à yarn.lock
5. Utilisation d'un caractère générique (*) pour importer tous vos packages
6. Ajouter un script pour exécuter les deux packages

1. Créez votre projet et votre espace de travail racine

Dans le terminal de votre ordinateur local, créez un nouveau dossier appelé example-monorepo :

 $ mkdir example-monorepo

Dans le dossier, créez un nouveau package.json avec notre espace de travail racine.

 $ cd example-monorepo $ touch package.json

Ce package doit être privé afin d'éviter de publier accidentellement l'espace de travail racine. Ajoutez le code suivant à votre nouveau fichier package.json pour rendre le package privé :

 { "private": true, "name": "example-monorepo", "workspaces": [], "scripts": {} }

2. Créez un projet React et ajoutez-le à la liste des espaces de travail

Dans cette étape, nous allons créer un nouveau projet React et l'ajouter à la liste des packages dans l'espace de travail racine.

Commençons par créer un dossier appelé packages dans lequel nous ajouterons les différents projets que nous créerons dans le tutoriel :

 $ mkdir packages

Facebook a une commande pour créer de nouveaux projets React : create-react-app . Nous l'utiliserons pour créer une nouvelle application React avec toute la configuration et les scripts requis. Nous créons ce nouveau projet avec le nom "client" dans le dossier packages que nous avons créé à l'étape 1.

 $ yarn create react-app packages/client

Une fois que nous avons créé notre nouveau projet React, nous devons dire à Yarn de traiter ce projet comme un espace de travail. Pour ce faire, nous devons simplement ajouter "client" (le nom que nous avons utilisé précédemment) dans la liste "espaces de travail" dans le package racine.json . Assurez-vous d'utiliser le même nom que vous avez utilisé lors de l'exécution de la commande create-react-app .

 { "private": true, "name": "example-monorepo", "workspaces": ["client"], "scripts": {} }

3. Créez un projet express et ajoutez-le à l'espace de travail

Il est maintenant temps d'ajouter une application back-end ! Nous utilisons express-generator pour créer un squelette Express avec toute la configuration et les scripts requis.

Assurez express-generator est installé sur votre ordinateur. Vous pouvez l'installer en utilisant Yarn avec la commande suivante :

 $ yarn global add express-generator --prefix /usr/local

En utilisant express-generator , nous créons une nouvelle application Express avec le nom "server" dans le dossier packages .

 $ express --view=pug packages/server

Enfin, ajoutez le nouveau package "server" dans la liste des espaces de travail à l'intérieur de la racine package.json .

 { "private": true, "name": "example-monorepo", "workspaces": ["client", "server"], "scripts": {} }

Remarque : Ce tutoriel est simplifié avec seulement deux packages (serveur et client). Dans un projet, vous pouvez généralement avoir autant de packages que vous en avez besoin et, par convention, la communauté open source utilise ce modèle de dénomination : @your-project-name/package-name . Par exemple : j'utilise @ferreiro/server sur mon site Web.

4. Installez toutes les dépendances et dites bonjour à yarn.lock

Une fois que nous avons ajouté notre application React, ainsi que notre serveur Express, nous devons installer toutes les dépendances. Les espaces de travail Yarn simplifient ce processus et nous n'avons plus besoin d'accéder à chaque application et d'installer manuellement leurs dépendances. Au lieu de cela, nous exécutons une commande - yarn install - et Yarn fait la magie pour installer toutes les dépendances pour chaque paquet, les optimiser et les mettre en cache.

Exécutez la commande suivante :

 $ yarn install

Cette commande génère un fichier yarn.lock (similaire à cet exemple). Il contient toutes les dépendances de votre projet, ainsi que les numéros de version de chaque dépendance. Yarn génère ce fichier automatiquement et vous ne devez pas le modifier.

5. Utilisation d'un caractère générique (*) pour importer tous vos packages

Jusqu'à présent, pour chaque nouveau package que nous avons ajouté, nous étions obligés de mettre également à jour la racine package.json pour inclure le nouveau package dans la liste workspaces:[] .

Nous pouvons éviter cette étape manuelle en utilisant un caractère générique (*) qui indique à Yarn d'inclure tous les packages dans le dossier packages .

À l'intérieur de la racine package.json , mettez à jour le contenu du fichier avec la ligne suivante : "workspaces": ["packages/*"]

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

6. Ajouter un script pour exécuter les deux packages

Dernière étape! Nous devons avoir un moyen d'exécuter les deux packages - le client React et le client Express - simultanément. Pour cet exemple, nous utiliserons concurrently . Ce package nous permet d'exécuter plusieurs commandes en parallèle.

Ajoutez concurrently à la racine package.json :

 $ yarn add -W concurrently

Ajoutez trois nouveaux scripts dans l'espace de travail racine package.json . Deux scripts initialisent indépendamment les clients React et Express ; l'autre utilise concurrently pour exécuter les deux scripts en parallèle. Voir ce code pour référence.

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": { "client": "yarn workspace client start", "server": "yarn workspace server start", "start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" } }

Remarque : Nous n'aurons pas besoin d'écrire nos scripts de start dans les packages "serveur" et "client" car les outils que nous avons utilisés pour générer ces packages ( create-react-app et express-generator ) ajoutent déjà ces scripts pour nous. Nous sommes donc prêts à partir !

Enfin, assurez-vous de mettre à jour le script de démarrage Express pour exécuter le serveur Express sur le port 4000. Sinon, le client et le serveur essaieront d'utiliser le même port (3000).

Accédez à packages/server/bin/www et modifiez le port par défaut à la ligne 15.

 var port = normalizePort(process.env.PORT || '4000');

Nous sommes maintenant prêts à exécuter nos packages !

 $ yarn start

Où aller en partant d'ici

Récapitulons ce que nous avons couvert. Tout d'abord, nous avons découvert les espaces de travail Yarn et pourquoi c'est un excellent outil pour créer un projet monorepo. Ensuite, nous avons créé notre premier projet JavaScript monorepo en utilisant Yarn, et nous avons divisé la logique de notre application en plusieurs packages : client et serveur. De plus, nous avons créé nos premiers scripts npm de base et ajouté les dépendances requises pour chaque application.

À partir de là, je vous suggère d'examiner en détail les projets open source pour voir comment ils utilisent les espaces de travail Yarn pour diviser la logique du projet en plusieurs packages. La réaction est bonne.

De plus, si vous souhaitez voir un site Web de production utilisant cette approche pour séparer les applications back-end et front-end en packages indépendants, vous pouvez vérifier la source de mon site Web, qui comprend également un administrateur de blog. Lorsque j'ai migré la base de code pour utiliser les espaces de travail Yarn, j'ai créé une demande d'extraction avec Kyle Wetch.

De plus, j'ai mis en place l'infrastructure d'un projet de hackathon qui utilise les espaces de travail React, webpack, Node.js et Yarn, et vous pouvez vérifier le code source ici.

Enfin, il serait vraiment intéressant pour vous d'apprendre à publier vos packages indépendants pour vous familiariser avec le cycle de vie du développement. Il existe quelques didacticiels intéressants à consulter : la publication de fils ou la publication de npm.

Pour tout commentaire ou question, n'hésitez pas à me contacter sur Twitter. De plus, dans les mois à venir, je publierai plus de contenu à ce sujet dans mon blog, afin que vous puissiez également vous y abonner. Bon codage !