Índice
- Introducción
- ¿Qué es NPM?
- Instalación de NPM
- Creación de un proyecto
- Diferencias entre paquetes globales y locales
- Instalación de un paquete
- Versiones en NPM
- ¿Qué es el package.json?
- ¿Qué es el package-lock.json?
- Conclusiones
Introducción
Javascript no para de ganar popularidad en el mundo del software, y aunque se pueda pensar que es por la multitud de frameworks que existen en dicho lenguaje, lo cierto es que el gran culpable de esto es Node y más concretamente su gestor de paquetes, más conocido por sus siglas NPM.
Seguramente muchos lo habéis utilizado cuando creasteis alguna aplicación en React, Angular o Vue por ejemplo, me refiero al típico npm install, que todos hemos hecho al crear o bajarnos un proyecto ya creado de algún repositorio, pero, ¿cuál es la verdadera función de esta herramienta? ¿cómo utilizarla con todo su potencial?
En este tutorial veremos como utilizar NPM desde lo más básico. Vamos a ello.
¿Qué es NPM?
Como ya hemos dicho, NPM es un gestor de paquetes de Node, que nos permite compartir miles de librerías como lodash o moment entre todos los desarrolladores que quieran usarlas alrededor del mundo, y podemos encontrarlas de manera sencilla a través de su pagina web
Y esta es la importancia de NPM, te pongo un ejemplo, imagina que quieres fabricar una bicicleta, tendrías que conseguir todos los materiales, moldearlos pieza a pieza, y luego ensamblarlos uno por uno, y esto costaría mucho tiempo y esfuerzo, pero, con NPM ya existirían piezas pre-fabricadas de esta bicicleta y nosotros tan solo tendríamos que usarlas para crear nuestra propia bicicleta.
Instalación de NPM
Para poder usar NPM debemos tener instalado en nuestra máquina Node, para ello nos dirigimos su página web y descargamos la versión para nuestro sistema operativo.
Una vez tengamos instalado Node en nuestra máquina podemos ir a la terminal y ejecutar estos comandos para saber si ya está instalado Node y NPM en nuestro ordenador.
Para conocer la versión de Node:
node -v
Para conocer la versión de NPM:
npm -v
En mi caso, esto me mostrará por consola: v12.22.6 y 6.14.15 respectivamente, probablemente vosotros tendreis versiones mas recientes.
Creación de un proyecto
Para poder hacer la demostración de como funciona NPM debemos crear primero un proyecto donde instalar nuestros paquetes, para ello crearemos una carpeta, y dentro de ella en la terminal usaremos una utilidad que viene con NPM:
npm init
Tras ejecutar este comando en la terminal nos pedirá el nombre del proyecto, normalmente nos sugiere el mismo de la carpeta en la que estamos:
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (project-example)
Le damos a enter si queremos seguir manteniendo el mismo nombre o introducimos el que queramos. Una vez hecho esto, nos va a preguntar por la versión:
version: (1.0.0)
Por defecto nos dará la 1.0.0, le diremos que sí. Ahora nos pedirá una descripción, esto es ideal que lo rellenemos para que los demás sepan de que se trata nuestro proyecto:
description: Es un proyecto de ejemplo, para mostrar como funciona NPM.
Ahora tenemos que indicarle el punto de entrada de nuestro proyecto, es decir, el fichero por donde empezará a ejecutarse, por defecto es index.js, pero nosotros podemos especificarle el que queramos:
entry point: (index.js)
Luego, nos pedirá el comando para ejecutar los test, aquí le podríamos especificar el comando de jest, si utilizamos esta librería para nuestros tests, en nuestro caso no vamos a usar tests, ya que es un ejemplo, así que lo dejaremos vacío:
test command:
Después de esto, tendremos que especificarle el enlace de nuestro repositorio de git, ya que esto será de mucha utilidad si vamos a publicar nuestro proyecto como un paquete NPM, ya que permitirá a la gente ver nuestro código o documentación:
git repository:
Ahora nos pedirá las palabras clave de nuestro proyecto y el autor, esto también es muy útil si publicamos nuestro proyecto, introduciremos las palabras clave separadas por comas:
keywords: example, project author: Juanma Perez
Por último, nos pedirá el tipo de licencia, por defecto es ISC, pero también podemos especificarle la del MIT, que es la que se usa en la mayoría de proyectos open-source de Node:
license: (ISC)
Una vez tengamos todos los campos completados, nos va a mostrar un ejemplo de como quedaría, y si estamos conformes, lo aceptaremos y tendremos nuestro proyecto ya creado:
About to write to ../package.json:
{
"name": "project-example",
"version": "1.0.0",
"description": "Es un proyecto de ejemplo, para mostrar como funciona NPM.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
Si abrimos nuestro proyecto en Visual Studio Code por ejemplo, deberíamos ver que nos ha creado un fichero package.json (del cuál hablaremos más adelante) con toda la información de nuestro proyecto.
Diferencias entre paquetes globales y locales
Antes de instalar nuestra primera librería, vamos a ver la diferencia entre paquetes globales y locales.
Existen 2 formas de instalar paquetes/librerías con NPM, de forma global, es decir, se instala en nuestra máquina y es accesible desde cualquier proyecto, o de forma local, solo accesible desde el proyecto que estamos desarrollando.
La mayoría de las veces nos interesará instalar una librería de forma local, por ejemplo, imagínate que quieres usar un paquete para controlar las fechas en tu proyecto, lo instalarías de forma local porque solo lo necesitas para este proyecto, y lo haría de la siguiente forma:
npm install <nombre del paquete>
¿Y en que ocasiones nos va a interesar instalar un paquete de manera global? Pues por ejemplo, imagina que quieres instalar el paquete gulp-cli, la Command Line Tools de Gulp, esto te interesa que este accesible desde cualquier proyecto, terminal y cualquier parte de tu máquina para poder usarlo, entonces, para instalarlo de forma global, es tan sencillo como indicar la flag g en el comando, de esta forma:
npm install -g <nombre del paquete>
Y ahora que ya sabes esta diferencia, vamos a instalar un paquete en nuestro proyecto.
Instalación de un paquete
Para instalar un paquete, primero necesitamos saber cuál necesitamos y su nombre, para ello vamos a la pagina web oficial de NPM, en la que podremos encontrar todas las librerías que necesitemos, tan solo tendremos que escribir en su buscador lo que necesitamos:
Imagina que necesitamos una utilidad que nos ayude con las fechas en nuestro proyecto, así que buscamos date, en la web y nos sale un formateador de fechas:
Hacemos clic sobre el resultado y nos lleva a la página del paquete, desde aquí podremos copiar el comando para instalarlo en nuestro proyecto:
Para ello vamos a la terminal, y dentro de la carpeta de nuestro proyecto escribimos o copiamos el siguiente comando:
npm i date-format
Nota: La ‘i’ es la abreviación de install, así que sería lo mismo de las 2 formas.
Una vez esté instalado, se agregará a nuestro package.json en forma de dependencia, de esta forma:
"dependencies": {
"date-format": "^4.0.14"
}
npm i date-format@<version>
Versiones en NPM
Un aspecto muy importante a la hora de trabajar con paquetes de NPM son las versiones, esto es porque los paquetes pertenecen a diferentes autores, y se actualizan de forma independiente, pero esto podría provocar conflictos entre aquellos que dependan entre sí.
Para ello, algo importante es conocer las diferentes versiones disponibles de nuestro paquete, podemos mirarlo en la página del paquete en la web de NPM, pero también podemos hacerlo a través de la terminal con un comando que poca gente suele conocer, así que siguiendo nuestro ejemplo, vamos a conocer las versiones del paquete que acabamos de instalar, de date-format:
npm view date-format versions
[ '0.0.0', '0.0.1', '0.0.2', '1.0.0', '1.1.0', '1.2.0', '2.0.0', '2.1.0', '3.0.0', '4.0.1', '4.0.2', '4.0.3', '4.0.4', '4.0.5', '4.0.6', '4.0.7', '4.0.8', '4.0.9', '4.0.10', '4.0.11', '4.0.12', '4.0.13', '4.0.14' ]
^3.4.1 o ~2.3.3~ significa ‘versión aproximada’. Esto permite parches más recientes, pero no acepta paquetes con una versión minor diferente. Por ejemplo, ~2.3.3 permitirá valores entre 2.3.3 y 2.4, sin incluir 2.4. Por ejemplo, ~2 aceptará cualquier versión que empiece por 2.^ significa ‘compatible con la versión’, y es más amplio que el anterior. Sólo rechaza cambios en la versión mayor. Por ejemplo, ^3.4.1 permitirá cualquier versión entre ese valor y 4.0.0, sin incluir la versión 4.npm install se instalará esa versión. Por el contrario si quieres actualizar todos tus paquetes, tan sólo deberás ejecutar npm update.¿Qué es el package.json?
npm init, como vimos al comienzo del tutorial, es muy útil, ya que almacena información del proyecto, como el nombre, el autor, o incluso el repositorio de github. Y por otra parte guarda información sobre los paquetes que estás usando en tu proyecto, de esta forma, cualquier persona que se baje tu proyecto podrá ver toda la información relacionada con él.npm install, y NPM leerá el package.json e instalará todo lo necesario para que el proyecto pueda funcionar.npm install y su principal función es la de almacenar la actual versión de los paquetes y dependencias que tienes instaladas en tu maquina local, esto es para poder solucionar los problemas de compatibilidad que pueden existir cuando usas el fichero package.json en diferentes entornos.npm install alguna dependencia tiene el prefijo ^ y se ha actualizado, te instalarás una versión diferente a la que debe tener el proyecto, y si esta versión tiene algún cambio que pueda romper tu proyecto, no podrás ejecutarlo.npm installConclusiones
Como ves, usar NPM no es tan complicado, si tienes alguna duda siempre puedes consultar la documentación oficial.
