¿Qúe es NPM? - Tutorial. Todo lo que necesitas saber

Si eres desarrollador web, sobre todo en la parte del frontend, seguramente ya conozcas NPM. NPM es un gestor de paquetes para Javascript. Es una especie de Maven (si usas Java te sonará) para paquetes Javascript, es decir, sirve para instalar y gestionar versiones de paquetes y librerías js.
NPM lleva mucho tiempo siendo el referente en cuanto a gestores de paquetes javascript, pero desde hace un tiempo le ha salido un competidor: Yarn. Los de yarn aseguran que su gestor de librerías js es mucho más rápido y potente, pero como la mayoría de gente usa NPM he decidido hablar sobre él.
¿Para qué sirve NPM?
Como hemos visto NPM es un gestor de paquetes, eso quiere decir que puede:
- Descargar librerías js
- Actualizar en caso de nueva versión las librerías instaladas
- Descargar una versión en específico de la librería
- Gestionar las dependencias entre paquetes
Una de las ventajas de npm es que todos los paquetes los descarga de un repositorio de paquetes llamado npmjs.
NPM usa un fichero especial llamado package.json en el que se declaran las librerías y sus versiones. Esto es muy útil ya que puedes tener este archivo con todas las librerías que necesites para que con un simple comando se descarguen todas y no tengas que estar buscándolas en sus respectivos repositorios.
Lo bueno es que al repositorio de librerías puedes subir las tuyas propias de tal forma que si actualizas la librería y la subes al repositorio, con un comando dentro del proyecto en el que se usa se actualiza a la nueva versión.
Cómo instalar NPM
NPM viene incorporado en NodeJS, es decir, al descargar y instalar nodejs se instalará también npm automáticamente. NodeJS se utiliza para ejecutar código javascript fuera del navegador y npm es se gestor de paquetes y librerías.
Para instalar NPM, tanto en Windows, Linux y MAC, simplemente dirígete a su página oficial: https://nodejs.org/es/download/
Una vez descargado y instalado nodejs, comprueba si se ha instalado correctamente ejecutando en una terminal (en Windows pulsa Control + R y escribe cmd ) el comando:
node -v
Si la salida del comando es la versión de nodejs es que se ha instalado correctamente, comprueba también que tienes npm ejecutando:
npm -v
Cómo actualizar NPM
Si quieres actualizar NPM a la última versión simplemente tienes que lanzar este comando:
npm install -g npm
O si quieres actualizar NPM en MAC:
sudo npm install -g npm
También puedes actualizar NPM usando tu gestor de paquetes de la distribución de Linux si lo has instalado así.
Tutorial NPM, comandos básicos
Antes de empezar con los comandos que tiene npm, me gustaría aclarar cómo funcionan el número de versión que tienen los paquetes. Los paquetes de NPM suelen seguir un versionado semántico, es decir:
MAJOR.MINOR.PATCH
Por ejemplo dado un paquete con versión 5.4.2:
- El primer número (5) indica una versión grande del paquete, es decir, cuando este número cambia. se supone que ha habido un cambio grande en el paquete que rompe lo que había con la versión anterior.
- El segundo número (4) indica una versión menor, es decir, en esta versión se resuelven errores anteriores y se añaden cosas pero sin romper la versión anterior, es decir, esta versión será compatible con una versión anterior y por lo tanto se puede actualizar con seguridad.
- El último número (2) indica arreglo de errores y pequeños fallos pero sin añadir funcionalidad, por lo tanto también es compatible con versiones anteriores.
NPM init. Inicialización
Este comando sirve para crear el archivo package.json. Te guiará y preguntará una serie de preguntas para rellenar el archivo y así no lo tengas que crear a mano
npm init
NPM install. Cómo descargar de paquetes
Este es el comando que más veces vas a usar. Como su nombre indica sirve para instalar paquetes. Los paquetes se descargarán y se meterán automáticamente en una carpeta llamada node_modules por lo que no te asustes si la ves en tu proyecto.
Lo más normal es que añadas esta carpeta al .gitignore para que no se suba al repositorio git. Este comando tiene muchas variantes:
Descargar todas las dependencias:
npm install
NPM install asecas lo que hace es leer el archivo del package.json para instalar todas las dependencias que encuentre. Si el paquete ya estaba instalado va a intentar actualizarlo.
Lo primero que se hace cuando te bajas un repositorio de git con paquetes npm es ejecutar este comando para que descargue todas las librerías, de lo contrario no funcionará.
Descargar paquete en particular:
npm install <nombre-paquete>
Por ejemplo npm install jquery. Descarga el paquete y lo mete en la carpeta node modules. Para buscar el nombre del paquete lo puedes hacer en el repositorio de npmjs: https://www.npmjs.com/
Descargar paquete y añadir versión exacta:
npm install <nombre-paquete> --save-exact
Por ejemplo npm install dayjs —save-exact
. Este comando es igual que el anterior con la diferencia de que al guardarse en el package.json se guarda con la versión exacta en ese momento, es decir, nunca se va actualizar. Esto permite mantener siempre la misma versión para que todo funcione igual.
Descargar paquete global:
npm install -g <nombre-paquete>
Por ejemplo npm install -g @angular/cli. Esto sirve para instalar un paquete globalmente, es decir, se suele utilizar para instalar utilidades en línea de comandos para poder utilizarlas mediante línea de comandos. Por ejemplo instalando globalmente angular cli, consigues que a partir de ese momento, puedes utilizar el comando ng para crear
NPM uninstall. Eliminando paquetes
Lo contrario a instalar un paquete, lo elimina de la carpeta node_modules y de las dependencias del package.json. Por ejemplo:
npm uninstall jquery
NPM update. Cómo actualizar paquetes y dependencias
Al tener paquetes instalados, en algún momento vamos a querer actualizarlos, pues con este comando puedes hacerlo, podemos hacerlo así:
npm update
Actualiza todos los paquetes del package.json en caso de que hayan sido actualizados.
npm update jquery
Como ves arriba, también se puede actualizar paquetes en particular pasando su nombre. Como he explicado antes, npm al usar versionado semántico, puedes indicar que tipo de actualización quieres en cada paquete:
- Poniendo ~1.0.4, por ejemplo, solo va a actualizar el último número, es decir, va a subir solo de versión patch
- Poniendo ^1.0.4, por ejemplo, solo va a actualizar los dos últimos números, es decir, va a subir solo de versión minor
- Poniendo simplemente un asterisco en la versión *, va actualizar también de versión mayor.
NPM al instalar paquetes por defecto, te coloca el ^ para que actualice versiones patch y minor.
Como recomendación te aconsejo que instales este paquete para tener un listado de posibles actualizaciones de los paquetes:
npm i -g npm-check-updates
Una vez instalado, simplemente ejecuta ncu
NPM list. Listado de versiones
Sirva para pintar en pantalla el nombre de todos los paquetes instalados en el proyecto en el que estemos situados, nos da el nombre del paquete, su versión y las dependencias que haya encontrado
npm list
Este comando tiene un parámetro especial para indicar la profundidad en la que va a buscar:
npm list depth <numero>
Es decir, si indicamos que queremos una profundidad de 0, solo va a mostrar los paquetes que hay en el package.json. Una profundidad de 1 mostrará esos paquetes más sus dependencias directas, y así sucesivamente.
NPM outdated. Paquetes desactualizados
Como su nombre indica, imprime una lista con los paquetes desactualizados. Si queremos actualizarlos podemos hacerlo como hemos visto antes con npm update:
npm outdated
Cómo instalar paquetes NPM desde repositorios Github o Gitlab
Si da la casualidad que el paquete que quieres instalar no se encuentra en el repositorio de paquetes de npmjs, no te preocupes porque también puedes instalar paquetes directamente desde el repositorio de github.
Esto también lo puedes usar para tener tus propias librerías localizadas en repositorios de github.
npm install git://github.com/usuario/repositorio.git#v0.1.0
Además al final puedes indicar la versión que quieres descargar (tirará de los tags del repositorio) y también puedes tirar de ramas para no tener problemas de versiones:
npm install git://github.com/usuario/repositorio.git#develop
Lo bueno es que puedes cambiar gitlab.com por tu servidor de git, por ejemplo gitlab o bitbucket. Además con el mismo comando puedes descargar paquetes npm de repositorios git privados.
Ejecutar tareas y comandos npm
Otro uso típico de es el de ejecutar pequeños comandos npm de una forma más cómoda. Si has usado cualquier framework para el frontend, o has trabajado con nodejs estos comandos ya los habrás usado.
Los comandos los puedes definir en el package.json, en la sección scripts:
{
"scripts": {
"dev": "node lib/server-development",
"prod": "node lib/server-production"
},
}
Así de sencillo, en este caso he creado un par de comandos para ejecutar en desarrollo o en producción. Para ejecutar los comandos simplemente me sitúo con la consola en el proyecto y ejecuto el comando que quiera mediante:
npm run <nombre_comando>
Por ejemplo:
npm run dev
Lo bueno de esto es que puedes poner dentro de los comandos que defines cualquier código bash por lo que puede ser útil para automatizar ciertas tareas en el frontend sin tener que recurrir a gulp o a webpack.
Conclusiones
Infografía creada por @JonaEstrella11
Merece la pena totalmente invertir un poco de tiempo en aprender NPM porque al final lo vas a estar utilizando todo el rato si desarrollas proyectos frontend.
Mi recomendación es que intentes no instalar demasiados paquetes ya que hay muchos paquetes javascript que a su vez dependen de otros paquetes javascript y así sucesivamente, haciendo que tu proyecto tenga demasiadas dependencias.
Si vas a instalar un paquete, mira sus dependencias antes de hacer nada, o busca una alternativa que tenga menos dependencias (o que no las tenga).
Hace un tiempo saltó la noticia de que alguien actualizó un paquete del que dependían otos paquetes en npm y proyectos haciéndolo malicioso. No suele pasar pero por si acaso hay que tener precaución con lo que instalas. Te dejo el enlace de la noticia:
Artículos que mencionan a este:
¿Qué es Angular? Aprende a instalarlo y usarlo desde cero
Tutorial para empezar a usar Angular. Vemos sus ventajas, estructura de carpetas y además lo comparamos con React y Vue.
Tutorial SASS. Todo sobre el preprocesador CSS
Descubre uno de los preprocesadores CSS más populares en la actualidad. Aprende a crear variables y estilos anidados en CSS.
Cómo manejar fechas en Javascript con dayjs
Las fechas en Javascript son difíciles de tratar, pero con la librería de dayjs, una alternativa a momentjs no vas a tener ningún problema
Cómo instalar Vue de varias formas
Aprende a descargar y crear tus primeros proyectos con Vue
Vue CLI - El asistente de línea de comandos de Vue
Aprendemos a usar Vue CLI para crear proyectos de Vue, arrancarlos, compilarlos e incluso para instalar plugins
Cómo es la estructura de carpetas de un proyecto Vue
Aprende para qué sirve cada carpeta y fichero que se crea al crear un proyecto Vue usando Vue CLI.
Todo lo que necesitas aprender sobre frontend desde cero
¿Sabes lo que significa frontend en el mundo del desarrollo web y de la programación? Aprende con este roadmap todo lo que necesitas para convertirte en frontend developer
Guía completa para aprender Javascript
Javascript es el lenguaje de programación de las páginas webs. Permite añadir elementos dinámicos e interacción con los usuarios de las páginas webs
¿Qué es Javascript? ¿Para qué sirve?
Apredemos qué es y para que nos puede servir aprender Javascript, además resolvemos el misterio de por qué lo llamaron Javascript.