Deshacerse de node_modules con Yarn Plug'n'Play

Reduzca su tiempo de instalación hasta en un 70%. ¡Pregúntame cómo! ?

Cualquiera que me conozca puede confirmar que soy un amante de JavaScript y de todo su ecosistema desde hace mucho tiempo . Como ingeniero de front-end, los administradores de paquetes basados ​​en nodos han sido una parte crucial de mi conjunto de herramientas desde 2013.

Primero, utilicé Bower, que se centró principalmente en el mundo del front-end. Luego, en 2015, lamentablemente (ok, no realmente ) me di cuenta de que Bower estaba muriendo y que NPM, el administrador de paquetes predeterminado para Node, también era el camino a seguir para el front-end. Al principio, fue extraño para mí usar NPM para otras cosas además de los módulos de nodo, pero me acostumbré a la idea y migré sin problemas.

Finalmente, solo un año después, Facebook nos dio Yarn, una alternativa moderna y ultrarrápida a la NPM. ¡Me encantó a primera vista! Pero algunas cosas seguían siendo problemáticas ...

Problemas heredados en Yarn

Además de la velocidad, Yarn trajo una serie de ventajas en comparación con la versión NPM en ese momento, como archivos de bloqueo, modo fuera de línea, resistencia de la red, sumas de verificación y otras. Sin embargo, Yarn tomó prestados algunos problemas conocidos de NPM:

node_modules aquí, allá, en todas partes

Para cada proyecto de su máquina que utilice NPM o Yarn, node_modulesse crea una carpeta. No importa si 10 proyectos usan exactamente la misma versión de un módulo dado, se copiará una y otra vez en cada node_modulescarpeta de estos proyectos.

Generar una nueva carpeta node_modules lleva mucho tiempo

Incluso dando un gran salto adelante en términos de velocidad de instalación, Yarn se vio limitado por las limitaciones de node_modules. Simplemente crear la carpeta node_modules toma hasta el 70% del tiempo necesario para ejecutarse yarn install(con un caché en caliente). Es una gran cantidad de archivos que se crearán en cada instalación. Entonces, no culpes a Yarn.

Dependencias no agregadas a package.json

Este es un escenario para usted: su aplicación funciona perfectamente en desarrollo, pero falla en producción. Después de horas de investigación, finalmente se da cuenta de que olvidó agregar una dependencia a su package.json. Sí, puede pasar.

Resolución de módulo lenta en tiempo de ejecución

El tiempo de arranque de su aplicación se ve muy afectado por la forma en que Node resuelve las dependencias. Es una pérdida de tiempo consultar el sistema de archivos para descubrir desde dónde se resolverá una dependencia determinada.

¡Yarn Plug'n'Play al rescate!

Todos los problemas anteriores fueron resueltos por el equipo de Yarn con el lanzamiento de la función Plug'n'Play en septiembre pasado.

Cuando habilita PnP, en lugar de copiar todos los archivos necesarios del caché a la node_modulescarpeta, esto es lo que hace Yarn:

  1. Crea un solo archivo con tablas de resolución estática. Estas tablas contendrán un montón de información importante, como: paquetes disponibles en el árbol de dependencias, cómo se relacionan entre ellos y su ubicación en el disco.
  2. Se utiliza un resolutor especial para ayudar a Node a descubrir dónde se ha instalado cada dependencia (en la carpeta de caché de Yarn). Se basa únicamente en las tablas de resolución que se crearon previamente. Como estas tablas contienen información acerca de todo el árbol de dependencias, no será necesario el proceso de resolución node_modules a hacer un montón de staty readdirllamadas en tiempo de ejecución más, lo que reduce significativamente el tiempo de arranque de aplicaciones. Y como Yarn conoce todas sus dependencias, se quejará si intenta importar un módulo que no está presente en su package.json:

Uso de Yarn Plug'n'Play

Convertir un proyecto para utilizar PnP es tan fácil como 1–2–3. Solo necesita agregar una installConfigsección a su package.json, con un pnpconjunto de claves para true, como este:

{ "installConfig": { "pnp": true }}
Nota: Necesita Yarn v1.12 + para poder utilizar Plug'n'Play.

Después de eso, simplemente ejecute yarn instally todo dentro de su node_modulescarpeta se eliminará. A partir de ahora, todas las dependencias se resolverán directamente desde la caché activa de Yarn.

Usando PnP en un nuevo proyecto React con create-react-app

Si usa create-react-app 2+, ¡la buena noticia es que funciona muy bien con Yarn Plug'n'Play! Simplemente agregue la --use-pnpopción al create-react-appcomando y estará listo:

npx create-react-app your-app-name --use-pnp

Posibles problemas

Como nada es perfecto en el mundo, PnP puede generar nuevos problemas cuando se utiliza en proyectos que se basan en una lógica de instalación personalizada. Si necesita más información sobre estos posibles problemas nuevos, puede encontrar una explicación detallada en este documento.

Conclusión

Plug'n'Play resuelve algunos problemas realmente molestos en Yarn. Además, mejora drásticamente el almacenamiento en caché de dependencias en los CI, lo que ahorra tiempo de instalación y permite que nuestras compilaciones vayan directamente al grano: ¡ ejecutar las pruebas!

¡Y eso es! Diviértete con Yarn PnP.