Como usar NPM y no morir en el intento

0
1727

Índice

  1. Introducción
  2. ¿Qué es NPM?
  3. Instalación de NPM
  4. Creación de un proyecto
  5. Diferencias entre paquetes globales y locales
  6. Instalación de un paquete
  7. Versiones en NPM
  8. ¿Qué es el package.json?
  9. ¿Qué es el package-lock.json?
  10. 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 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 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.

Contenido del package json generado por NPM en nuestro proyecto de prueba

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:

Pagina web de npm con su buscador

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:

Resultados de la busqueda date en la web de NPM

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"
}
Por defecto, nos instalará la última versión del paquete, si queremos una versión en especifico, lo haremos de la siguiente forma:
npm i date-format@<version>
Toda la información sobre versiones o como usar la librería podrás encontrarla en la página misma del paquete en la web de NPM.
Y con esto, ya tenemos instalada nuestra primera librería de manera local en nuestro proyecto, y ya podemos utilizarla.

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
Esto nos devolverá lo siguiente:
[
'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'
]
Con esto tendremos todas las versiones disponibles de la librería que estamos consultando, pero, ¿que significa cada número?
Normalmente la 1.0.0, suele ser la versión release, la primera versión de nuestra librería, y luego se va actualizando siguiendo las normas del versionado semántico.
El versionado semántico funciona de la siguiente manera, imaginemos que tenemos la versión 3.7.28.
El primer número, corresponde a la major version, esta se cambia cuando existen cambios muy grandes y/o no hay retrocompatibilidad con versiones anteriores y probablemente rompa código antiguo.
El segundo número corresponde a la minor version, esta se cambia cuando existen cambios que no rompen código antiguo y ofrecen retrocompatibilidad con versiones anteriores.
Y por último, el tercer número corresponde a la patch version, esta se cambia cuando se introducen pequeños ajustes para arreglar bugs en el código, y no rompen ninguna de las anteriores versiones.
Algo en lo que puedes haberte fijado, es en estos símbolos antes de los números de versiones, dentro del fichero package.json:
^ y ~
Por ejemplo: ^3.4.1 o ~2.3.3
El símbolo ~ 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.
El ^ 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.
Algo que también debes tener en cuenta, es que si modificas la versión en el package.json, y ejecutas el comando 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?

Es un fichero, escrito en json, que se crea al iniciar el proyecto con 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.
Además, cuando instalamos un paquete o varios, se crea una carpeta llamada node_modules, esta carpeta no se sube a los repositorios de git, ya que es extremadamente pesada.
Pero aún así, cualquiera que baje el proyecto tendrá todos los paquete y librerías que hemos usado, ¿cómo? Por medio del package.json, en este fichero estarán los nombres de todos los paquetes con sus versiones, por lo que tan solo tendremos que hacer un npm install, y NPM leerá el package.json e instalará todo lo necesario para que el proyecto pueda funcionar.
Este fichero podrás editarlo en cualquier momento y cambiar las versiones de tus paquetes, o la descripción del proyecto por ejemplo.
Pero, ¿y entonces para que está el package-lock.json?

¿Qué es el package-lock.json?

Este fichero se crea después de ejecutar el comando 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.
Por ejemplo, si te clonas un proyecto en tu máquina, y en el tiempo desde que se subió el último cambio a cuando tu haces 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.
Y esto es lo que soluciona el fichero package-lock.json, si haces un npm install
instalará las versiones exactas que se han quedado guardadas previamente, de esta forma no habrá problemas de incompatibilidades entre dependencias.

Conclusiones

Como ves, usar NPM no es tan complicado, si tienes alguna duda siempre puedes consultar la documentación oficial.

Te animo a que crees tus propios proyectos y vayas experimentando, nos vemos en un próximo tutorial 🙂

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad