Primero que nada, ¿qué diablos es npm link? A grandes rasgos es una forma de vincular dos paquetes de forma local, para que así no tengas la necesidad de tener que actualizar las dependencias por cada cambio que realices en uno y se vea reflejado en el otro.
Por ejemplo, pensemos que trabajas en un UI Kit en una parte, y en la otra trabajas en la aplicación, como sabremos el UI Kit solo son partes de diseño pero no partes lógicas, entonces pensemos que necesitas corregir o acomodar alguna parte de ese kit, pero, en un mundo maldito, tendrías que subir ese cambio a NPM, así sea privado o público, después, ir a tu package.json, actualizar la versión e instalar la nueva.
Esto sería demasiado tardado y tedioso, y si el bug no se corrigió como esperabas, otra vez a hacerlo, tus versiones serían como 1.0.3892013091283092183091231209 y pues tampoco tiene mucho sentido, ahí es cuando npm link entra al juego.
Lo primero que haremos será ubicar nuestros dos proyectos, vamos a llamarle a cada uno de la siguiente forma como referencia:
- front: Es nuestra aplicación principal
- ui-kit: Es nuestra aplicación de UI
Así que lo primero que haremos, será generar el link. Haré un pequeño paréntesis.
Como recomendación, siempre hay que validar que no exista un link previo en el global: npm ls --link --global porque si hay, puede que no esté correctamente linkeado y entonces no veamos bien las cosas, si vemos que ya hay algo previo, hay que deslinkear con: npm unlink {nombre} donde {nombre} sería el que nos aparezca en la lista y esto se hace en el proyecto donde vinculamos la dependencia (normalmente), si no se desvincula apropiadamente por estar en el global, solo agregamos la bandera --global quedando: npm unlink {nombre} --global.
Ahora sí, ya que sabemos y tenemos a consideración esto vamos, como dije, a posicionarnos exactamente donde queremos el link usando nuestra consola por ejemplo:
c:/mi-ruta-falsa/codigo/ui-kit/distY ahí vamos a ejecutar: npm link – por default el nombre que va a considerar es el que se encuentra en el package.json más próximo así que será el que tendremos que usar, como mencionaba antes en el npm unlink . Una vez que ya está listo el link (tardará unos segundos normalmente), tendremos que ir a nuestro proyecto:
c:/mi-ruta-falsa/codigo/front/Aquí no es necesario que tengamos que entrar al dist o algo porque aquí es donde estaremos trabajando la dependencia…
Ahora, ya que tenemos la ubicación (donde está el package.json) ejecutamos npm link ui-kit (nuevamente, el nombre se basa en el que se encuentra en el package.json pero se puede usar el comando de npm ls que compartí arriba para corroborar), y listo, tardará un rato en generar la vinculación apropiadamente y veremos (quizá) que nos borró la dependencia del package.json pero no te preocupes que ya está todo (si es que te sucede).
Para corroborar, abre tu carpeta node_modules y deberías poder ver tu dependencia vinculada ahí, ve a tu proyecto ui-kit y modifica algo, por ejemplo el README y deberás ver reflejado el cambio instantáneamente en tu proyecto principal.
Por último, como digo, si a veces nos toca re-compilar el proyecto y la carpeta dist se pierde, entonces hay que hacer los pasos superiores para primero desvincular el link existente y después volver a vincularlo ya que se pierde, no es lo más óptimo pero al final son 2 comandos a tener que esperar los deploys a npm y otras cosas más tardadas.
Espero te sirva este tutorial, nos vemos en el próximo.
