Organisez le code de votre projet comme un pro

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

La même question m’était posée après quelques mois de travail sur mon site Web personnel . À l'origine, tout le code était stocké 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 avoir les deux projets dans le même référentiel facilitait la recherche de fonctions et de classes, et facilitait la refactorisation. Cependant, j'ai trouvé quelques inconvénients:

• Pas de déploiement indépendant.
  Les deux applications utilisaient le même package.json et il n'y avait pas de séparation claire entre les deux projets.
• Les limites sont floues. 19659005] Étant donné que je m'appuie sur un package global.json global, je ne disposais pas d'un mécanisme permettant de définir des versions spécifiques pour le back-end et le front-end.
• Utilitaires partagés et code sans versioning.

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

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

Qu'est-ce qu'un espace de travail dans le fil?

Yarn est un gestionnaire de paquetages réalisé par Facebook, et il a une grande fonctionnalité appelée espaces de travail de laine . Les espaces de travail de fil vous permettent d'organiser votre base de code de projet à l'aide d'un référentiel monolithique (monorepo). L'idée est qu'un référentiel unique contiendrait plusieurs packages. Les paquets sont isolés et peuvent vivre indépendamment du projet plus grand.

Vous pouvez également placer tous ces paquets dans des référentiels distincts. Malheureusement, cette approche affecte la capacité de partage, l'efficacité et l'expérience du développeur lors du développement sur les packages et leurs projets dépendants. En outre, 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 développement.

Les projets de Monorepo ont été largement acceptés par de grandes entreprises telles que Google ou Facebook. monorepo can scale.

React est un bon exemple de projet open source monorepo. En outre, React utilise des espaces de travail Yarn pour atteindre cet objectif. Dans la section suivante, nous allons apprendre à créer notre premier projet monorepo avec Yarn.

Créer un projet Monorepo avec React And Express en utilisant les espaces de travail de Yarn en six étapes

Nous avons appris ce qu'est Yarn, quelle monorepo. est, et pourquoi Yarn est un excellent outil pour créer un monorepo. Maintenant, apprenons à partir de zéro comment configurer un nouveau projet en utilisant des espaces de travail Fil. Pour suivre, vous aurez besoin d’un environnement de travail avec une installation à jour de npm. Téléchargez le code source .

Prérequis

Pour compléter ce didacticiel, vous devez installer la laine sur votre ordinateur. Si vous n'avez pas encore installé Yarn, veuillez suivre les instructions .

Voici les étapes que nous allons suivre dans ce tutoriel:

1. Création d'un espace de travail racine et de projet
2. Créer un Réagissez le projet et ajoutez-le à la liste des espaces de travail
3. Créez un projet Express et ajoutez-le à l'espace de travail
4. Installez toutes les dépendances et dites bonjour à yarn.lock
5. à l'aide 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 votre terminal d'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 paquet devrait être privé afin d'éviter la publication accidentelle de l'espace de travail racine. Ajoutez le code suivant à votre nouveau fichier package.json pour rendre le package privé:

 {
   "privé": vrai,
   "name": "example-monorepo",
   "espaces de travail": [],
   "scripts": {}
}

2. Création d'un projet React et ajout à la liste des espaces de travail

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

Commençons par créer un dossier appelé . ] packages où nous allons ajouter les différents projets que nous allons créer dans le tutoriel:

 $ mkdir packages

Facebook a pour mission de créer de nouveaux projets React: create-react-app . Nous allons l'utiliser 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 créé à l'étape 1.

 $ yarn create réact-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 des «espaces de travail» à la racine package.json . Veillez à utiliser le même nom que celui utilisé lors de l'exécution de la commande de création-réaction-application .

 {
   "privé": vrai,
   "name": "example-monorepo",
   "espaces de travail": ["client"],
   "scripts": {}
}

3. Créer un projet Express et l'ajouter à 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 toutes les configurations et tous les scripts requis.

Assurez-vous que express-generator est installé sur votre ordinateur. Vous pouvez l'installer à l'aide de Yarn à l'aide de 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 «serveur» dans le dossier packages .

 $ express --view = pug packages / server

Enfin, ajoutez le nouveau package «serveur» à la liste des espaces de travail à l'intérieur de la racine package.json .

 {
   "privé": vrai,
   "name": "example-monorepo",
   "espaces de travail": ["client", "server"],
   "scripts": {}
}

Note : Ce tutoriel est simplifié avec seulement deux packages (serveur et client). Dans un projet, vous pouvez généralement avoir autant de packages que nécessaire, et par convention, la communauté open-source utilise ce modèle de dénomination: @ nom-de-votre-projet / nom-du-package . 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 de fil simplifient ce processus et nous n’avons plus besoin d’aller vers toutes les applications et d’installer leurs dépendances manuellement. Au lieu de cela, nous exécutons une commande – yarn install – et Yarn fait le travail magique pour installer toutes les dépendances de 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 ajouté, nous étions également obligés de mettre à jour la racine package.json afin d'inclure le nouveau package dans le fichier espaces de travail: [] liste

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

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

 {
   "privé": vrai,
   "name": "example-monorepo",
   "espaces de travail": ["packages/*"],
   "scripts": {}
}

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

Dernière étape! Nous avons besoin d'un moyen d'exécuter les deux packages – le client React et le client Express – simultanément. Pour cet exemple, nous allons utiliser simultanément . Ce paquet permet d'exécuter plusieurs commandes en parallèle.

Ajoutez simultanément à la racine package.json :

 $ yarn add -W simultanément

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 simultanément pour exécuter les deux scripts en parallèle. Voir ce code pour référence .

 {
   "privé": vrai,
   "name": "example-monorepo",
   "espaces de travail": ["packages/*"],
   "scripts": {
       "client": "démarrage du client",
       "server": "yarn work works server start",
       "start": "simultanément - tuer-autres-sur-échecs " serveur de fil  "" client de fil  "
   }
}

Note : Il ne sera pas nécessaire d'écrire nos scripts start dans les packages "serveur" et "client", car les outils 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). .

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

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

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

Où aller d’ici

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

À partir de ce point, je vous suggère de passer en revue les projets open-source en détail pour voir comment ils utilisent les espaces de travail Yarn pour scinder la logique du projet. beaucoup de paquets. React est un bon exemple.

En outre, si vous souhaitez qu'un site Web de production utilise cette approche pour séparer les applications principales et frontales en packages indépendants, vous pouvez vérifier la source de mon . site Web qui comprend également un blog admin . Lorsque j'ai migré la base de code pour utiliser les espaces de travail Yarn, j'ai créé une requête de tirage avec Kyle Wetch .

En outre, j'ai configuré l'infrastructure d'un projet de hackathon utilisant React, webpack. , Node.js et Yarn, et vous pouvez vérifier le code source sur ici.

Enfin, il serait vraiment intéressant pour vous d’apprendre à publier vos packages indépendants pour vous familiariser avec les cycle de vie du développement. Il existe quelques tutoriels intéressants à vérifier: fils publient ou npm publish .

Pour tout commentaire ou question, n'hésitez pas à communiquer avec moi le Twitter . De plus, au cours des mois suivants, je publierai plus de contenu à ce sujet dans mon blog afin que vous puissiez vous y abonner également. Codage heureux!

(dm, og, il)