Aprende a configurar un Proyecto de Tema Gatsby con Lerna: esta guía te ayudará a entender qué es un mono-repositorio y cómo gestionarlo con Lerna usando NPM en lugar de Espacios de trabajo de Yarn.

Index

  • ¿Qué es Lerna y por qué vale la pena intentarlo?
  • Configuración de Lerna con NPM desde el shell
  • Andamiaje de carpetas y archivos con shell
  • Usando Lerna
    • Elija su enfoque
  • Organice todo con Lerna bootstrap
  • Ejecute comandos y scripts
  • Asistente de actualización

¿Qué es Lerna y por qué vale la pena intentarlo?

Empecé a seguir el curso de Creación de Temas Gatsby de Jason Lengstorf (@jlengstorf) y pronto me di cuenta de que no sabía nada sobre ‘Yarn Workspaces’. Es una forma bonita de administrar lo que se llama un mono-repo: un repositorio que tiene más de un proyecto dentro y podría compartir dependencias.

Por doppelmutzi de doppelmutzi.github.io:

Estos proyectos se denominan espacios de trabajo o paquetes. Por el contrario, el uso de múltiples repositorios con cada repositorio que aloja solo un proyecto se denomina enfoque de múltiples repositorios.

Una cosa que me sorprendió con el enfoque mono-repo fue que mis Paquetes / Espacios de trabajo pueden compartir localmente las mismas dependencias node_modules. Esto me ahorra tiempo y espacio físico.

los espacios de trabajo lerna y yarn nos permiten crear bibliotecas y aplicaciones en un único repositorio sin obligarnos a publicar en npm u otros registros. La belleza detrás de estas tecnologías es que pueden encontrar dependencias de paquetes analizando paquetes.archivos json ubicados en la carpeta raíz de cada proyecto. Por lo tanto, estas herramientas hacen que sea obsoleto crear enlaces simbólicos manualmente o usar enlaces npm de «bajo nivel» directamente.

Ahora, incluso si ya está utilizando yarn workspaces creo que vale la pena probar Lerna porque proporciona una serie de ventajas. Además, puedes usar Lerna con Espacios de trabajo de Hilo:

con un comando lerna puede iterar a través de todos los paquetes o de paquetes particulares, ejecutando una serie de operaciones (como linting, testing y building) en cada paquete. Por lo tanto, complementa los espacios de trabajo de yarn que se hacen cargo del proceso de administración de dependencias.

Así que finalmente decidí aprender Lerna, lo siento por el trabalenguas, pero no quería cambiar a Yarn (ya que me siento cómodo con npm). Así es como logré que funcionara:

Configuración de Lerna con NPM desde el shell

Cree un directorio para su proyecto e ingrese en él con este comando:

mkdir try-lernacd try-lerna

Puede instalar Lerna globalmente (npm i -g lerna) o usarlo con npx.

  • Init lerna

    npx lerna init --independent

Esto:

  • init un repositorio de git
  • crear package.json
  • crear lerna.json
  • crear packages carpeta (aquí usted puede colocar sus áreas de trabajo).

Paquetes es como lerna llama a los espacios de trabajo.

Puede organizar los paquetes como desee, si lo prefiere, puede poner todos los paquetes en la carpeta raíz y luego cambiar la matriz para que coincida (como un enfoque de «espacios de trabajo de yarn»).

Mi lerna.el archivo json tiene stream: true (para ver la salida de gatsby cuando se ejecuta develop con lerna) y hoist: true (para levantar node_modules también con el comando lerna add; explicaré esta última característica adelante):

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

Puede agregar esto manualmente o usar este comando de 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 

Carpetas y archivos de andamiaje con shell

Esta sección se puede hacer a mano siguiendo la primera lección del curso de Jason Lengstorf enlazado en la introducción.
Solo recojo todos los pasajes básicos para cumplirlos con pocos comandos del shell.
En caso de que desee utilizar mi enfoque, recuerde reemplazar «NOMBRE» con el nombre de su tema y luego simplemente copie y pegue estos comandos:

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

Contenido inicial para el paquete.json en la carpeta del sitio:

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 

paquete.json en el tema de la carpeta (vuelva a reemplazar el NOMBRE y también inserte SU_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 

Aquí está el resultado:

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

PD: Le aconsejo que cree un .gitignore y agregue node_modules de inmediato:

echo "node_modules" > .gitignore

Usando Lerna

Un problema con Lerna es que no puede instalar varias dependencias por paquete con un solo comando (como lo hace con yarn workspace name_workspace add package1 package2 etc). Necesitas hacerlo uno por uno, así (si no lo instalaste globalmente, tendrás que preceder cada comando con npx):

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

Aquí --scope site se usa para decirle a Lerna que instale solo en el paquete «site».

Sin embargo, puede instalar una dependencia, digamos gatsby, para cada paquete con un solo comando:

lerna add gatsby

Este comando será:

  • Instale Gatsby para cada Paquete (en este caso para el Sitio y también para el Paquete de Tema).
  • Si ha habilitado hoist en el lerna.json creará una carpeta node_modules en tu raíz (ver ‘Lerna Bootstrap forward’):

Elija su enfoque

Si le gusta este enfoque, puede continuar instalando todas las dependencias comunes (react, react-dom) en los paquetes. Si necesita instalar algunas dependencias solo para un paquete, use --scope name_of_the_package (recuerde que es el nombre especificado en el paquete.json no el nombre de la carpeta).

También puede usar npm instalando todas las dependencias que desee en el paquete respectivo. Pero recuerde que este enfoque instalará dependencias node_modules para cada carpeta respectiva. Esto podría estar limpio y luego izarse después. Aunque esta opción es válida, le llevará más tiempo.

Sea cual sea la opción que elija, recuerde agregar / vincular el Paquete de Tema local como una dependencia para el Paquete del Sitio (use el nombre que estableciópackage.json):

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

Organice todo con Lerna bootstrap

Al final, puede hacerlo de forma segura:

lerna bootstrap 

Este comando es realmente útil, especialmente si ya tiene su paquete.json lleno de sus respectivas dependencias.

Con la opción hoist: true (en lerna.json) colocará una carpeta compartida node_modules ubicada en la raíz, luego vinculará las dependencias locales en sus respectivos package.json.

Me gusta mucho la función ho hoist es un proceso que evita dependencias duplicadas en los módulos node, por lo que ahorra espacio físico y tiempo de instalación.

Si por alguna razón desea limpiar algo primero que pueda hacer:

lerna clean && lerna link && lerna bootstrap 

Ejecutar comandos y scripts

Para ejecutar scripts (ubicados en el package.json), debe especificar (o no) el paquete de destino:

lerna run develop --scope Package_name

Lerna también le permite ejecutar cualquier comando desde la raíz a cada paquete (use dash). Por ejemplo:

lerna exec -- rm -rf node_modules 

Esto eliminará los módulos de nodo en cada carpeta de paquetes.

Asistente de actualización

En el futuro, cuando necesite actualizar sus paquetes, puede usar el asistente de actualización:

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

a continuación, solo tendrá que ejecutar este comando y el asistente lo ayudará:

lernaupdate