Yarn Workspaces: organice la base de código de su proyecto como un profesional

Cada vez que empiezo a trabajar en un nuevo proyecto, me pregunto: "¿Debería usar repositorios git separados para mi servidor back-end y mi(s) cliente(s) front-end? ¿Cuál es la mejor manera de organizar la base de código?”

Tuve esta misma pregunta después de unos meses trabajando en mi sitio web personal. Originalmente tenía todo el código en el mismo repositorio: el back-end usaba Node.js y el front-end usaba ES6 con Pug. Adopté esta organización por conveniencia, ya que tener ambos proyectos en el mismo repositorio facilitó la búsqueda de funciones y clases, y facilitó los refactores. Sin embargo, encontré algunas desventajas:

• Sin implementaciones independientes.
  Ambas aplicaciones usaban el mismo paquete.json y no había una separación clara en ambos proyectos.
• Límites poco claros.
  Dado que confío en un paquete global.json , no tenía un mecanismo para establecer versiones específicas para el back-end y el front-end.
• Utilidades compartidas y código sin versionado.

Después de algunas investigaciones, descubrí que los espacios de trabajo de Yarn eran una gran herramienta para resolver esos inconvenientes, y era una herramienta útil para crear un proyecto monorepo (¡más adelante!).

En este artículo, comparto una introducción a los espacios de trabajo de Yarn. Realizaremos un tutorial juntos sobre cómo crear su primer proyecto con él, y terminaremos con un resumen y los próximos pasos.

¿Qué son los espacios de trabajo de Yarn?

Yarn es un administrador de paquetes de la gente de Facebook, y tiene una gran característica llamada espacios de trabajo de Yarn. Los espacios de trabajo de Yarn le permiten organizar la base de código de su proyecto utilizando un repositorio monolítico (monorepo). La idea es que un solo repositorio contenga varios paquetes. Los paquetes están aislados y podrían vivir independientemente del proyecto más grande.

Como alternativa, podríamos colocar todos estos paquetes en repositorios separados. Desafortunadamente, este enfoque afecta la compartibilidad, la eficiencia y la experiencia del desarrollador al desarrollar los paquetes y sus proyectos dependientes. Además, cuando trabajamos en un solo repositorio, podemos movernos más rápido y construir herramientas más específicas para mejorar los procesos durante todo el ciclo de vida del desarrollo.

Los proyectos monorepo han sido ampliamente aceptados por grandes empresas como Google o Facebook, y han demostrado que monorepo puede escalar.

“

React es un buen ejemplo de un proyecto de código abierto que es monorepo. Además, React usa espacios de trabajo de Yarn para lograr ese propósito. En la siguiente sección, aprenderemos cómo crear nuestro primer proyecto monorepo con Yarn.

Creación de un proyecto Monorepo con React y Express usando Yarn Workspaces en seis pasos

Hasta ahora, hemos aprendido qué es Yarn, qué es un monorepo y por qué Yarn es una gran herramienta para crear un monorepo. Ahora, aprendamos desde cero cómo configurar un nuevo proyecto utilizando los espacios de trabajo de Yarn. Para continuar, necesitará un entorno de trabajo con una instalación de npm actualizada. Descarga el código fuente.

requisitos previos

Para completar completamente este tutorial, necesitará tener Yarn instalado en su máquina. Si no ha instalado Yarn antes, siga estas instrucciones.

Estos son los pasos que seguiremos en este tutorial:

1. Cree su proyecto y espacio de trabajo raíz
2. Cree un proyecto React y agréguelo a la lista de espacios de trabajo
3. Cree un proyecto Express y agréguelo al espacio de trabajo
4. Instale todas las dependencias y salude a yarn.lock
5. Uso de un comodín (*) para importar todos sus paquetes
6. Agregar un script para ejecutar ambos paquetes

1. Cree su proyecto y espacio de trabajo raíz

En la terminal de su máquina local, cree una nueva carpeta llamada example-monorepo :

 $ mkdir example-monorepo

Dentro de la carpeta, cree un nuevo paquete.json con nuestro espacio de trabajo raíz.

 $ cd example-monorepo $ touch package.json

Este paquete debe ser privado para evitar la publicación accidental del espacio de trabajo raíz. Agregue el siguiente código a su nuevo archivo package.json para que el paquete sea privado:

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

2. Cree un proyecto React y agréguelo a la lista de espacios de trabajo

En este paso, crearemos un nuevo proyecto React y lo agregaremos a la lista de paquetes dentro del espacio de trabajo raíz.

Primero, creemos una carpeta llamada packages donde agregaremos los diferentes proyectos que crearemos en el tutorial:

 $ mkdir packages

Facebook tiene un comando para crear nuevos proyectos React: create-react-app . Lo usaremos para crear una nueva aplicación React con toda la configuración y los scripts necesarios. Estamos creando este nuevo proyecto con el nombre "cliente" dentro de la carpeta de paquetes que creamos en el paso 1.

 $ yarn create react-app packages/client

Una vez que hayamos creado nuestro nuevo proyecto React, debemos decirle a Yarn que trate ese proyecto como un espacio de trabajo. Para hacer eso, simplemente necesitamos agregar "cliente" (el nombre que usamos anteriormente) dentro de la lista de "áreas de trabajo" en el paquete raíz.json . Asegúrese de usar el mismo nombre que usó cuando ejecutó el comando create-react-app .

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

3. Cree un proyecto Express y agréguelo al espacio de trabajo

¡Ahora es el momento de agregar una aplicación de back-end! Usamos express-generator para crear un esqueleto Express con toda la configuración y los scripts necesarios.

Asegúrese de tener express-generator instalado en su computadora. Puede instalarlo usando Yarn con el siguiente comando:

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

Usando express-generator , creamos una nueva aplicación Express con el nombre "servidor" dentro de la carpeta de paquetes .

 $ express --view=pug packages/server

Finalmente, agregue el nuevo paquete "servidor" en la lista de espacios de trabajo dentro del paquete raíz.json .

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

Nota : este tutorial se simplifica con solo dos paquetes (servidor y cliente). En un proyecto, normalmente puede tener tantos paquetes como necesite y, por convención, la comunidad de código abierto usa este patrón de nomenclatura: @your-project-name/package-name . Por ejemplo: uso @ferreiro/server en mi sitio web.

4. Instala todas las dependencias y saluda a yarn.lock

Una vez que hayamos agregado nuestra aplicación React, así como nuestro servidor Express, debemos instalar todas las dependencias. Los espacios de trabajo de Yarn simplifican este proceso y ya no necesitamos ir a cada aplicación e instalar sus dependencias manualmente. En su lugar, ejecutamos un comando, yarn install , y Yarn hace la magia de instalar todas las dependencias para cada paquete, optimizarlas y almacenarlas en caché.

Ejecute el siguiente comando:

 $ yarn install

Este comando genera un archivo yarn.lock (similar a este ejemplo). Contiene todas las dependencias de su proyecto, así como los números de versión de cada dependencia. Yarn genera este archivo automáticamente y no debes modificarlo.

5. Uso de un comodín (*) para importar todos sus paquetes

Hasta ahora, por cada nuevo paquete que agregamos, nos vimos obligados a actualizar también el paquete raíz.json para incluir el nuevo paquete en la lista de áreas de workspaces:[] .

Podemos evitar este paso manual usando un comodín (*) que le dice a Yarn que incluya todos los paquetes dentro de la carpeta de paquetes .

Dentro del paquete raíz.json , actualice el contenido del archivo con la siguiente línea: "workspaces": ["packages/*"]

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

6. Agregue un script para ejecutar ambos paquetes

¡Último paso! Necesitamos tener una forma de ejecutar ambos paquetes, el cliente React y el cliente Express, simultáneamente. Para este ejemplo, usaremos concurrently . Este paquete nos permite ejecutar múltiples comandos en paralelo.

Agregue concurrently al paquete raíz.json :

 $ yarn add -W concurrently

Agregue tres nuevos scripts dentro del espacio de trabajo raíz package.json . Dos scripts inicializan los clientes React y Express de forma independiente; el otro se usa concurrently para ejecutar ambos scripts en paralelo. Consulte este código como referencia.

 { "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\" } }

Nota : No necesitaremos escribir nuestros scripts de start en los paquetes "servidor" y "cliente" porque las herramientas que usamos para generar esos paquetes ( create-react-app y express-generator ) ya agregan esos scripts por nosotros. ¡Así que estamos listos para irnos!

Finalmente, asegúrese de actualizar el script de inicio de Express para ejecutar el servidor Express en el puerto 4000. De lo contrario, el cliente y el servidor intentarán usar el mismo puerto (3000).

Vaya a packages/server/bin/www y cambie el puerto predeterminado en la línea 15.

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

¡Ahora estamos listos para ejecutar nuestros paquetes!

 $ yarn start

A dónde ir desde aquí

Recapitulemos lo que hemos cubierto. Primero, aprendimos sobre los espacios de trabajo de Yarn y por qué es una gran herramienta para crear un proyecto monorepo. Luego, creamos nuestro primer proyecto monorepo de JavaScript usando Yarn y dividimos la lógica de nuestra aplicación en varios paquetes: cliente y servidor. Además, creamos nuestros primeros scripts npm básicos y agregamos las dependencias requeridas para cada aplicación.

Desde este punto, le sugiero que revise los proyectos de código abierto en detalle para ver cómo usan los espacios de trabajo de Yarn para dividir la lógica del proyecto en muchos paquetes. Reaccionar es bueno.

Además, si desea ver un sitio web de producción que utiliza este enfoque para separar las aplicaciones de back-end y front-end en paquetes independientes, puede consultar el código fuente de mi sitio web, que también incluye un administrador de blog. Cuando migré el código base para usar los espacios de trabajo de Yarn, creé una solicitud de incorporación de cambios con Kyle Wetch.

Además, configuré la infraestructura para un proyecto de hackathon que usa los espacios de trabajo React, webpack, Node.js e Yarn, y puedes consultar el código fuente aquí.

Finalmente, sería muy interesante que aprendas a publicar tus paquetes independientes para familiarizarte con el ciclo de vida del desarrollo. Hay un par de tutoriales que son interesantes de consultar: publicación de hilo o publicación de npm.

Para cualquier comentario o pregunta, no dude en ponerse en contacto conmigo en Twitter. Además, en los próximos meses, publicaré más contenido sobre esto en mi blog, para que puedas suscribirte allí también. ¡Feliz codificación!