¿Qué es NPM? Introducción al Gestor de Paquetes de Node

¿Estás empezando a programar en javascript? Si la respuesta es que sí ya te habrás dado cuenta de que la eficiencia y que los aportes de otros desarrolladores son fundamentales. En esta publicación queremos ofrecerte una introducción a npm y cómo lo podrás implementar en tus proyectos de ahora en adelante.

Cuando estamos empezando a programar en javascript llega un momento en el que para abordar determinadas funcionalidades en nuestros proyectos debemos ser eficientes y aprovechar los aportes sólidos de otros desarrolladores, especialmente si han sido sobradamente probados, testeados y compartidos con la Comunidad.

A ese código, reutilizable, intercambiable y que suele dar solución a una necesidad concreta, le denominamos módulo, paquete o librería y para obtenerlo podemos descargarlo de repositorios como GitHub, importarlo a nuestra aplicación y darle uso con alguna o incluso ninguna configuración extra.

Una vez importando en nuestro proyecto estamos generando una dependencia y cuando estamos trabajando con unas pocas librerías externas podemos tener cierto control sobre cuáles son y dónde se localizan. Sin embargo, cuando nuestro proyecto crece en tamaño y complejidad, e incluimos librerías complejas que requieren a su vez de otras librerías, nuestra red de dependencias puede convertirse en una caótica maraña complicada de gestionar.

Para traer el orden a nuestra confusa red de dependencias se generaron los gestores de dependencias, y npm es uno de los más extendidos y completos que existen para librerías de javascript.

¿Qué es npm y para qué sirve?

npm (Node Package Manager) es, como su propio nombre indica, el gestor de paquetes, módulos o librerías que nos proporciona Nodejs. Se trata de una herramienta que nos facilita el trabajo con librerías permitiéndonos instalar, actualizar y eliminar librerías de forma relativamente sencilla y automatizar la gestión de dependencias.

Además, si somos usuarios experimentados también nos permitirá compartir y distribuir las librerías que nosotros mismos diseñemos.

¿Cómo podrás instalar npm?

Para comenzar a trabajar con npm utilizaremos npm cli, el módulo que gestiona la consola de npm y desde la que correremos los comandos que necesitemos. Este módulo viene incorporado con Nodejs, por lo que al instalar Nodejs adquiriremos también NPM.

Para comprobar si tenemos instalado Nodejs podemos escribir en nuestra consola el siguiente comando:

node --version

node -v

v16.1.0

npm -v

npm --version

7.11.2

En caso de que no tengamos instalado npm o Nodejs, procederemos a instalar Nodejs para obtener ambos.

La forma más sencilla de realizar la instalación es acudir a su web oficial y seguir los pasos que nos proponen: https://nodejs.org/es/download/

Una vez instalado, comprobaremos la instalación de Nodejs y npm con los comandos anteriormente descritos.

¿Cómo usar npm?

1. Iniciando npm

Una vez instalado npm, para usarlo debemos inicializarlo en la raíz de nuestro proyecto corriendo el comando ‘npm init’. Este comando nos abrirá un cuestionario preguntándonos por el nombre del paquete, la versión, una breve descripción, el punto de entrada de las importaciones, el comando de testeo, el repositorio de Git, palabras clave para buscadores de npm, el autor y el tipo de licencia, y nos propone respuestas por defecto para algunas de estas cuestiones entre paréntesis.
Si queremos que el cuestionario se rellene de forma automática podemos añadir ‘-y’ al comando anterior:

npm init -y

Cualquiera de los dos comandos de inicialización genera un fichero llamado package.json. Se trata de un fichero de tipo json que posee la configuración inicial de nuestro npm, básicamente construida a partir de la información que le hemos proporcionado en el cuestionario.

2. Descargando e instalando librerías

Una vez hemos inicializado npm, para instalar la última versión de una librería únicamente debemos correr el comando ‘npm install’ seguido del nombre de la librería, por ejemplo, si quisiéramos instalar Bootstrap emplearíamos el siguiente comando:

npm install bootstrap

También podemos utilizar la versión abreviada del mismo sustituyendo la palabra «install» por una «i». Si estamos interesados en obtener una versión concreta de una librería podemos especificar la versión que deseamos en el comando de instalación:

npm install bootstrap@4.6.x

Si desconocemos el nombre exacto de una librería podemos acudir a la web oficial de npm, buscar la librería, seleccionarla, ver lo que nos ofrece y obtener el comando con el que instalarla, en el caso de la librería jQuery la web nos propone el siguiente:

npm i jquery

La instalación de una librería nos mostrará un mensaje de confirmación en la consola, y la culminación del proceso generará cambios en nuestro fichero de configuración package.json, concretamente en su sección dependencias, en las que incluirá las librerías instaladas.

También se generará de forma automática un fichero llamado package-lock.json, que contiene una instantánea del árbol de dependencias que se va auto-generando. Esto hace que nuestro proyecto funcione con las versiones que determinamos para su uso, ignorando la existencia de otras más recientes que, por los cambios internos que pudieran implicar, introdujeran comportamientos inesperados en nuestra aplicación.

Por último se genera la carpeta node_modules. En su interior se recogen todas las librerías descargadas con el comando ‘install’.

El volumen de esta carpeta acaba siendo bastante pesado y en caso de trabajar con un control de versiones se recomienda no incluirla en él. La falta de esta carpeta en el control de versiones se suple con la presencia de la relación de librerías empleadas en el apartado de dependencias del fichero package.json y la instantánea de las versiones en el fichero package-lock.json, a partir de las cuales podemos descargar las versiones de las librerías que nuestro proyecto necesita en el equipo en que clonemos el proyecto.

3. Listando librerías descargadas y sus versiones

En caso de que queramos ver una relación de las librerías y versiones con las que contamos, podemos correr el siguiente comando en la raíz del proyecto:

npm ls

El cual nos devolverá un listado de las librerías, en nuestro caso únicamente tenemos jQuery:

¿Cómo importar y utilizar una librería en nuestro proyectos?

Una vez hemos instalado una librería, para poder usarla en nuestro proyecto debemos importarla en él.
Al ser librerías de javascript la importación se hace mediante etiquetas script en cuyo atributo src introducimos el fichero de extensión js de la librería que se ha descargado en la carpeta ‘node_modules’ al ejecutar el comando ‘install’.

Por ejemplo, si queremos importar en nuestro proyecto la librería jQuery que hemos instalado, debemos incluir el siguiente script en el documento HTML en el que vayamos a emplear:

Y a continuación de esta importación podremos dar uso a la librería en un nuevo script con total normalidad.
Si nuestra librería es algo más compleja e incluye, por ejemplo, CSS, deberemos importarlo de la manera adecuada, por ejemplo los módulos de CSS de la librería de Bootstrap se importarán en el href de un link:

Actualización de librerías

Para averiguar si existen nuevas versiones del conjunto de librerías que tenemos descargadas podemos correr el comando ‘outdated’:

npm outdated

npm update

npm up

npm update bootstrap

Tras actualizar se puede comprobar la nueva versión con la expresión ‘npm ls’ o visualizándola enlos ficheros package.json y package-lock.json como vimos antes.

Desinstalando librerías

Por último, cuando queremos desinstalar una librería que hemos descargado, podemos correr el comando ‘uninstall’ seguido del nombre de la librería, o emplear su versión abreviada:

npm uninstall bootstrap

npm un bootstrap

Al desinstalar una librería podremos comprobar que su contenido ha desaparecido de la carpeta node_modules y se ha eliminado de los ficheros package.json y package-lock.json.

Agrupando dependencias con WebPack

Con el uso básico de npm que hemos presentado ya podemos instalar, actualizar y eliminar librerías y emplearlas en nuestra aplicación web. Sin embargo la importación de cada librería la debemos hacer manualmente allí donde empleemos la librería, de forma que nuestros documentos HTML pueden acabar acumulando una importante cantidad de etiquetas script en cuyo atributo src importamos cada librería que necesitamos. Además, dependiendo del orden en el que hiciéramos las importaciones de librerías, aquellas que requirieran de otra que aún no hubiera sido importada podrían no funcionar.

Para tratar de simplificar las importaciones y poder ignorar el orden de las mismas disponemos de webpack.

Con esta librería, tras llevar a cabo todas las importaciones en un único documento js de entrada y de que se lleven a cabo una serie de transformaciones mediante el empleo de un sencillo comando, obtendremos un fichero js de salida que importaremos en nuestro documento HTML. En esa única importación de una línea contaremos con todas las librerías necesarias que antes de la transformación podrían ocupar decenas.

¿Conclusión? ¡Es una herramienta indispensable para el flujo de trabajo!

Ya hemos terminado esta introducción a npm para principiantes, ahora ya sabes cómo empezar a trabajar con npm y gestionar de manera eficiente las dependencias de tus proyectos. Si tienes cualquier duda o sugerencia ¡no dudes en ponerte en contacto con el equipo!

Más publicaciones…