Quizás, la finalidad más popular de npm es la de gestionar (instalar, desinstalar y actualizar) los paquetes o dependencias de un proyecto de forma cómoda, rápida y amigable para el desarrollador, permitiendo ahorrar tiempo y esfuerzo. Sin embargo, si no tenemos los conocimientos suficientes sobre como funciona npm, es posible que esta tarea se nos vuelva cuesta arriba.
Antiguamente, uno de los problemas de crear un proyecto, es que gestionabamos las dependencias de forma manual, es decir, colocabamos las librerías en carpetas específicas, pero dependíamos del conocimiento, memoria y experiencia de la persona que colocó esas dependencias, que en el mejor de los casos, lo habrá documentado. Las tareas de actualización de dichas librerías se volvían un proceso bastante tedioso (a veces hasta imposible) y complejo. Con
npmla idea es automatizar todo este proceso, para que sea una tarea rápida y sencilla.
Vamos a repasar las funcionalidades principales de npm para instalar y desinstalar paquetes en un proyecto. Para ello, utilizaremos principalmente el comando install y uninstall de npm, además de un pequeño comando ayudante, denominado npx, del que hablaremos más adelante.
Así pues, un resumen (a grandes rasgos) de lo que veremos sería: tareas de búsqueda, tareas de instalación, tareas de desinstalación y ejecución de ciertos comandos. A continuación los comandos que deberíamos utilizar para ello:
| Comando | Abreviatura | Descripción |
|---|---|---|
npm search <palabra> | npm s <palabra> | Realiza una búsqueda de paquetes en NPM. |
npm install <paquete> | npm i <paquete> | Instala el paquete indicado en node_modules/. |
npm uninstall <paquete> | npm r <paquete> | Desinstala el paquete indicado, eliminándolo de node_modules/. |
npx <comando> | - | Ejecuta paquetes CLI instalados a nivel de proyecto (o sin instalar). |
Es posible abreviar o utilizar alias en ciertos comandos. Por ejemplo
npm addonpm ison equivalentes anpm install, mientras quenpm unlink,npm remove,npm rmonpm rson equivalentes anpm uninstall.
Una vez hemos creado e inicializado nuestro proyecto con NPM, debemos aprender a instalar y desinstalar dependencias de nuestro proyecto de forma correcta, que es lo que veremos a continuación.
Instalar paquetes
Buscar paquetes de NPM
Pero antes de instalar un paquete, primero debemos encontrarlos. Los paquetes de NPM podemos buscarlos a través del buscador de NPM, disponible en la web NPMjs.com. No obstante, también podemos utilizar el buscador de linea de comandos de npm:
$ npm search howler
NAME | DESCRIPTION | AUTHOR | DATE | VERSION | KEYWORDS
howler | Javascript audio… | =goldfire | 2020-05-17 | 2.2.0 | howler ...
@jimbly/howler | GLOV.js fork of… | =jimbly | 2020-05-15 | 0.0.6 | howler ...
w-howler | A wrapper howler… | =semisphere | 2020-06-01 | 1.0.8 | package ...
w-audioplayer-vue | An audio player… | =semisphere | 2020-06-01 | 1.0.13 | component ...
...Si finalmente encontramos un paquete en el que estamos interesados y queremos ver más información sobre él, podemos utilizar el comando npm show, que nos mostrará más información del paquete o librería:
$ npm show howler
[email protected] | MIT | deps: none | versions: 47
Javascript audio library for the modern web.
https://howlerjs.com
keywords: howler, howler.js, audio, sound, web audio, webaudio, browser, html5, ...Una vez encontrado el paquete que buscamos, toca instalarlo.
Instalar paquetes de NPM
Para instalar un paquete en nuestro proyecto, simplemente debemos utilizar el comando npm install, situados en la carpeta de nuestro proyecto. Esto instalará dicho paquete y todas sus dependencias en la carpeta node_modules/, a la vez que actualiza el fichero package.json añadiendo el paquete y su versión como una dependencia del proyecto.
Existen varias formas de instalar un paquete:
| Comando | Formato largo | Descripción |
|---|---|---|
npm install -D | --save-dev | Instala el paquete en el proyecto, como dependencia de desarrollo. |
npm install | --save-prod | Instala el paquete en el proyecto, como dependencia de producción. |
npm install -g | --global | Instala el paquete en el sistema, sin asociarlo al proyecto. |
Las dependencias de desarrollo son aquellos paquetes que necesitamos en un proyecto mientras estamos desarrollándolo, pero una vez tenemos el código generado del proyecto, no vuelven a hacer falta. Los paquetes instalados con el flag --save-dev o -D se instalan en esta modalidad, guardándolos en la sección devDependences del fichero package.json.
Por otro lado, las dependencias de producción son aquellos paquetes que necesitamos tener en la web final generada, como librerías Javascript necesarias para su funcionamiento o paquetes similares. Los paquetes instalados con el flag --save-prod, -P o directamente sin ningún flag se instalan en esta modalidad, guardándolos en la sección dependences del fichero package.json.
Es importante diferenciar ambas modalidades, aunque al principio es habitual no saber exactamente cuando se trata de un paquete de desarrollo y cuando un paquete de producción.
Veamos un ejemplo de instalación con ambos tipos de paquetes:
# Instala en modalidad de desarrollo el paquete "gh-pages"
$ npm install --save-dev gh-pages
+ [email protected]
added 50 packages from 12 contributors and audited 92 packages in 1.998s# Instala en modalidad de producción la librería "Howler"
$ npm install howler
+ [email protected]
added 1 package from 1 contributor and audited 93 packages in 1.615sObserva que en ambos casos, se nos indica la versión del paquete instalada tras el carácter @.
En el primer caso estamos instalando el paquete gh-pages, una librería y comando CLI para desplegar fácilmente un proyecto en GitHub Pages. Como se trata de un paquete que no es necesario incluir en la web final (se utiliza en desarrollo para desplegar), pues lo instalamos con los flags --save-dev o -D.
En el segundo caso, estamos instalando el paquete Howler, una librería Javascript que permite manipular y gestionar archivos multimedia de audio desde el navegador. En este caso se trata de una librería JS que si estará incluida en la versión definitiva de la página, por lo que la instalaremos con el flag --save-prod, -P o sin indicar ninguno, ya que es la opción por defecto.
En la última modalidad los paquetes instalados de forma global no se asocian al proyecto, sino al sistema. Se explican en detalle en el capítulo Instalaciones globales con NPM.
Pasar desarrollo a producción
Si tenemos un paquete ya instalado en la modalidad de desarrollo y nos damos cuenta que realmente queremos tenerlo en la modalidad de producción (o viceversa), no es necesario desinstalar y volver a instalar el paquete.
Simplemente, escribimos el comando de instalación de la modalidad a la que queremos pasar:
$ npm install --save-prod howlerInternamente, npm se encargará de modificar el package.json y cambiar el paquete ya instalado de la sección devDependences a dependences.
Instalar versiones específicas
Si en algún momento necesitamos instalar una versión específica de un paquete, podemos hacerlo indicando la versión tras el nombre del paquete, separándola mediante el carácter @:
# Muestra las versiones disponibles del paquete @vue/cli
$ npm show @vue/cli versions
...
'4.4.0', '4.4.1', '4.4.2', '4.4.3',
'4.4.4', '4.4.5', '4.4.6', '4.5.0'
]
# Instala la versión 4.4.6 de @vue/cli
$ npm install -D @vue/[email protected]Esto puede ser interesante en algunas situaciones cuando nos encontramos que actualizar a la última versión de un paquete, nuestro proyecto deja de funcionar, o porque no queremos tener instalada la última versión de una librería.
Nota: Quizás el nombre del paquete
@vue/clite pueda parecer extraño. Se trata de una buena práctica el utilizar el formato@namespace/paquetepara nombrar paquetes. La palabranamespacese usa para el nombre del autor/producto/compañía ypaquetepara el nombre del proyecto.
El comando npx
Aunque hasta ahora hemos hablado de instalar paquetes de línea de comandos de forma global, también es posible instalarlos en el proyecto, y aquí es donde cobra vital importancia el comando npx.
Un problema que puede surgir es que si instalamos un paquete de linea de comandos a nivel de proyecto (y ya tenemos instalada otra versión más antigua en el sistema de forma global) tendrá preferencia esta última.
Es más, incluso si instalamos el paquete a nivel de proyecto solamente, es posible que al ejecutarlo el sistema no lo encuentre, ya que no está en el PATH del sistema, sino que está dentro de la carpeta node_modules/.bin.
Para solucionar esto, podemos ejecutar comandos CLI instalados de forma local de la siguiente forma:
# Instalamos el paquete parrotsay en el proyecto actual
$ npm install -D parrotsay
# Ejecutamos el comando "parrotsay"
$ npx parrotsayEsta última linea es equivalente a escribir ./node_modules/.bin/parrotsay, pero obviamente, mucho más cómodo.
El comando npx hace lo siguiente:
- 1) Busca si el paquete está instalado en
node_modules/.bin. Si lo está, lo ejecuta. - 2) Si no está, lo buscará en el sistema (instalado de forma global). Si está, lo ejecuta.
- 3) Si no lo encuentra, lo instalará temporalmente y lo ejecuta.
Esto hace que sea muy cómodo utilizar npx para ejecutar comandos CLI rápidamente.
Desinstalar paquetes
Si queremos desinstalar un paquete de nuestro proyecto, simplemente escribimos el siguiente comando en la terminal de texto:
npm uninstall howlerEsto se encargará de eliminar el paquete de node_modules/ y eliminar su asociación al proyecto en el package.json, independientemente de ser una dependencia de desarrollo o de producción.
