Cómo utilizar 'npm link' para desarrollar componentes compartibles

¿Por qué 'npm link'?

Si estás trabajando en un proyecto node, puede llegar un punto en el que tu aplicación tenga una dependencia con otro módulo personalizado que hayas creado.

Por ejemplo, en el proyecto de uno de nuestros clientes, mis colegas y yo somos responsables de un componente compartido llamado ''Componente de Búsqueda''. Como muchas de las librerías "compartidas" utilizadas en este proyecto, el componente de búsqueda se publica en un repositorio privado de Artifactory. Este se puede insertar en cualquier parte de la aplicación (aunque normalmente se coloca en la cabecera), para permitirle al usuario buscar con facilidad los contenidos disponibles en el sitio web y obtener al instante un resumen de los resultados.

En esta imagen se observa como el componente de búsqueda es un módulo node personalizado que puede insertarse en cualquier parte de la aplicación principal.

Aunque las pruebas automatizadas son ideales en ciertos contextos, cuando se trabaja con componentes compartidos, en particular los que están orientados al usuario, las pruebas manuales aportan algunas ventajas significativas. Por ejemplo, cuando se está en las fases iniciales de implementación de una función, puede tener más sentido probar manualmente los efectos de los cambios en la interfaz de usuario e iterar en función a ello. Una vez estabilizado, se pueden (y se deben) poner en marcha pruebas sólidas.

Este fue mi caso cuando trabajé con el componente de búsqueda. Una vez iniciada la app, al modificar el componente de búsqueda no se producía ningún cambio observable.

Por suerte, el gestor de paquetes node (npm) te permite desarrollar con dependencias con mayor facilidad a través del comando npm link.

El 'npm link' en pocas palabras

La documentación de npm define el npm link como un 'medio para enlazar simbólicamente una carpeta de paquetes'. En pocas palabras, es un medio para conectar tu aplicación principal a un módulo que tienes localmente en tu máquina. Al ejecutar la aplicación, cualquier cambio que hagas a la dependencia se reflejará en la aplicación.

Cómo utilizar 'npm link'

1. En el terminal, navega hasta la carpeta de la dependencia que deseas modificar y ejecuta el comando npm link. Esto hace que el componente esté disponible globalmente para el resto de tu aplicación.

2. Navega hasta la carpeta de la aplicación principal (es decir, la que depende del módulo que quieres modificar), y en la raíz ejecuta el comando npm link [nombre del módulo que quieres modificar]

3. Sucesivamente, ejecuta tanto la aplicación principal como la dependencia del módulo y empieza a realizar los cambios que quieras en la dependencia. Utilizar una librería que vigile los cambios en tu código y reconstruya tu aplicación como lo hace Nodemon será esencial para ahorrarte la molestia de reiniciar la aplicación constantemente.

4. Finalmente, una vez que hayas realizado todos los cambios (¡y las pruebas!), navega a la carpeta de la aplicación principal y desvincula la dependencia usando npm unlink [nombre del módulo que modificaste]. Esto eliminará la dependencia local de la aplicación principal. Del mismo modo, ve a la carpeta de la dependencia que has modificado y ejecuta npm unlink para que el módulo deje de estar disponible globalmente. Publica tu dependencia modificada y luego accede a la última versión haciendo una npm install estándar.

Una de las mejores cosas del ecosistema node es que fomenta la responsabilidad única al facilitar la creación y el desplegamiento de módulos estrechamente definidos que pueden ser compartidos en tu aplicación. Este desacoplamiento, sin embargo, hace que la modificación en vivo de las dependencias sea más complicada. Pero como hemos visto, este inconveniente se resuelve utilizando las herramientas proporcionadas.

Simplemente enlaza todo con npm-link y espera que esto te simplifique la vida.

Este artículo también ha sido publicado en mi blog personal.