Cuando construimos proyectos, usamos varias herramientas para hacer el desarrollo más fácil y rápido. La mayoría de las veces, estas herramientas son creadas por otros desarrolladores y se hacen públicas para su uso gratuito.
Imagina construir tu propio framework CSS: Tendrías que crear tus propios sistemas de diseño, clases de utilidad, diferentes colores y sus matices, miles de líneas de Sass (que finalmente se compilarán a CSS), numerosos componentes personalizados, pruebas de errores y financiación, si otros desarrolladores te ayudan a construir dicho proyecto. Esto puede ser un trabajo tedioso — y caro.
Pero gracias a la creciente cantidad de recursos gratuitos creados por los desarrolladores, es más fácil que nunca evitar todo ese coste y esfuerzo.
En este tutorial, hablaremos de npm (Node package manager), un repositorio online de JavaScript para paquetes de Node.js de código abierto. Conoceremos qué es npm, cómo utilizarlo, y la finalidad de los paquetes y cómo interactuar con ellos de forma local y remota.
También llegaremos a utilizar la interfaz de línea de comandos (CLI), aprenderemos sobre las dependencias, los scripts y el archivo package.json.
¿Qué es npm (Node Package Manager)?
Aunque puedes ver diferentes variaciones del significado de npm, las siglas significan «Node package manager».
npm es un gestor de paquetes para los proyectos de Node.js disponibles para su uso público. Los proyectos disponibles en el registro de npm se llaman «paquetes».
npm nos permite utilizar fácilmente el código escrito por otros sin necesidad de escribirlo nosotros mismos durante el desarrollo.
El registro npm tiene más de 1,3 millones de paquetes que son utilizados por más de 11 millones de desarrolladores en todo el mundo. (Hablaremos más sobre los paquetes más adelante en este tutorial)
¿Por Qué Usar npm?
Estas son algunas de las razones por las que deberías usar npm:
- Te permite instalar librerías, frameworks y otras herramientas de desarrollo para tu proyecto, de forma similar a la instalación de una aplicación móvil desde una tienda de aplicaciones.
- Accedes a proyectos Node.js seguros para el desarrollo.
- Te ayuda a acelerar la fase de desarrollo mediante el uso de dependencias preconstruidas.
- npm tiene una gran variedad de herramientas para elegir sin ningún coste.
- Utilizar los comandos de npm no requiere mucho aprendizaje, ya que son fáciles de entender y de utilizar.
A continuación, hablaremos de la interfaz de línea de comandos de npm.
La Interfaz de Línea de Comandos (CLI) de npm
La interfaz de línea de comandos de npm se utiliza para ejecutar varios comandos como instalar y desinstalar paquetes, comprobar la versión de npm, ejecutar scripts de paquetes, crear un archivo package.json, y mucho más.
A medida que avancemos en este tutorial, veremos algunos de los casos de uso de la interfaz de línea de comandos.
En un ordenador Windows, solemos referirnos a la interfaz de línea de comandos como Símbolo del sistema. En un ordenador Mac, se llama terminal.
Comandos y Alias Esenciales de npm
En esta sección, repasaremos algunos de los comandos npm más utilizados y lo que hacen.
npm install
Este comando se utiliza para instalar paquetes. Puedes instalar paquetes de forma global o local. Cuando un paquete se instala globalmente, podemos hacer uso de la funcionalidad del paquete desde cualquier directorio de nuestro ordenador.
En cambio, si instalamos un paquete localmente, sólo podremos utilizarlo en el directorio donde se ha instalado. Por tanto, ninguna otra carpeta o archivo de nuestro ordenador puede utilizar el paquete.
npm uninstall
Este comando se utiliza para desinstalar un paquete.
npm init
El comando init se utiliza para inicializar un proyecto. Cuando ejecutas este comando, crea un archivo package.json.
Al ejecutar npm init, se te pedirá que proporciones cierta información sobre el proyecto que estás inicializando. Esta información incluye el nombre del proyecto, el tipo de licencia, la versión, etc.
Para saltarte el proceso de proporcionar la información tú mismo, puedes simplemente ejecutar el comando npm init -y.
npm update
Utiliza este comando para actualizar un paquete npm a su última versión.
npm restart
Se utiliza para reiniciar un paquete. Puedes utilizar este comando cuando quieras parar y reiniciar un proyecto concreto.
npm start
Se utiliza para iniciar un paquete cuando es necesario.
npm stop
Se utiliza para detener la ejecución de un paquete.
npm version
Muestra la versión actual de npm instalada en tu ordenador.
npm publish
Se utiliza para publicar un paquete npm en el registro npm. Se utiliza sobre todo cuando has creado tu propio paquete.
Cómo Instalar npm
Para instalar npm, primero tienes que instalar Node.js en tu ordenador. Para ello, dirígete al sitio web de Node.js y descárgalo. Recomendamos descargar la versión LTS, ya que es la versión más estable de Node.js.
La instalación de Node.js instala automáticamente npm — no es necesaria una instalación por separado.
Cómo Comprobar la Versión Actual de npm Instalada en tu PC
Después de instalar Node.js, ejecuta los siguientes comandos para ver tus versiones de Node.js y npm:
node -vEl siguiente comando mostrará la versión actual de npm:
npm -vPaquetes npm
En esta sección, hablaremos de cómo instalar y desinstalar paquetes npm de forma global y local, actualizar un paquete, listar paquetes, cambiar la ubicación de un paquete y buscar paquetes instalados.
Empezaremos hablando de lo que es un paquete npm y veremos algunos ejemplos de paquetes utilizados por los desarrolladores.
¿Qué es un Paquete npm?
Un paquete es simplemente un proyecto preconstruido publicado en el directorio npm. Lo que los paquetes pueden hacer depende únicamente del creador y de los colaboradores del paquete.
Con npm, podemos acceder a numerosos proyectos creados por otros desarrolladores. Imagina crear tu propio framework CSS; eso llevaría mucho tiempo. Así que los desarrolladores crean estos proyectos y los ponen en el registro de npm para que podamos utilizarlos fácilmente y facilitar el proceso de desarrollo.
Un ejemplo de un paquete npm de este tipo es Tailwind CSS, un framework CSS de utilidad para construir páginas web. Otros paquetes npm populares son React, Chalk, Gulp, Bootstrap, Express y Vue.js, entre muchos otros.
Cómo Instalar un Paquete npm Globalmente
Cuando instalas un paquete npm de forma global, puedes acceder a él desde cualquier directorio de tu ordenador.
En esta sección, verás una forma práctica de instalar un paquete globalmente ejecutando un comando npm en tu terminal.
Para instalar un paquete globalmente, utiliza este comando:
npm install -g [package name]Ten en cuenta que la bandera -g en el comando es lo que permite a la CLI de npm instalar el paquete globalmente.
Aquí tienes un ejemplo:
npm install -g typescriptEl comando anterior instalará TypeScript globalmente en tu ordenador. Después de la instalación, puedes utilizar TypeScript en cualquier directorio.
Cómo Instalar un Paquete npm Localmente
En la sección anterior, vimos cómo instalar un paquete npm globalmente. Ahora vamos a hablar de cómo instalar uno localmente.
Instalar un paquete localmente significa que sólo puedes utilizar la funcionalidad del paquete en el directorio actual. Para ello, tendrás que navegar hasta el directorio en el que quieres instalar el paquete y ejecutar este comando en el terminal:
npm install [package name]Aquí tienes un ejemplo:
npm install typescriptEl comando anterior instalará TypeScript localmente, lo que significa que sólo funcionará en este directorio actual.
Cómo Desinstalar un Paquete npm Globalmente
En situaciones en las que ya no necesitamos un paquete npm, puedes eliminarlo de tu ordenador desinstalándolo.
Para desinstalar un paquete globalmente, utiliza esto:
npm uninstall -g [package name]Veamos un ejemplo:
npm uninstall -g typescriptEl comando del ejemplo anterior eliminará el paquete TypeScript de tu ordenador.
Cómo Desinstalar un Paquete npm Localmente
La desinstalación de un paquete npm instalado localmente es similar al ejemplo anterior, salvo que esta vez no usaremos la bandera -g.
Esta es la sintaxis:
npm uninstall [package name]Y aquí tienes un ejemplo que funciona:
npm uninstall typescriptCómo Actualizar npm y los Paquetes
Mantener tu npm y tus paquetes actualizados es la mejor manera de mantener los errores y los fallos de seguridad lejos de tu código.
Para actualizar npm a su última versión, utiliza el siguiente comando:
npm install npm@latest - gEsto actualiza npm globalmente en tu ordenador.
Cuando los creadores de un paquete introducen nuevas funciones o corrigen errores, actualizan el paquete en el registro de npm. Entonces tienes que actualizar tu propio paquete para poder utilizar las nuevas funciones.
Esta es la sintaxis del comando que utilizarías para hacerlo:
npm update [package name]Y aquí tienes un ejemplo de funcionamiento:
npm update typescriptEl comando anterior actualiza TypeScript a su última versión.
Además, al igual que en las secciones anteriores, podemos utilizar la bandera -g para actualizar un paquete de forma global. Es decir:
npm update -g typescriptCómo Cambiar la Ubicación de los Paquetes npm
Para algunos usuarios que no tienen permisos administrativos en su ordenador, la ejecución de los comandos npm puede devolver un mensaje de error. Para solucionar esto, puedes cambiar la ubicación de instalación por defecto de tus paquetes estableciendo una nueva ubicación/directorio.
Esta es la sintaxis para hacerlo:
npm config set prefix [new directory path]Una vez que hayas establecido la nueva ruta para la instalación de paquetes, todos tus paquetes npm se guardarán allí por defecto.
Cómo Listar Globalmente los Paquetes npm Instalados
Si te preguntas cómo comprobar el número de paquetes instalados en tu ordenador, npm proporciona un comando que los enumera.
Introduciendo el siguiente comando se listan todos los paquetes instalados globalmente en tu equipo:
npm list -gCuando el comando anterior se ejecute con éxito, verás una lista completa de los paquetes que has instalado previamente en cualquier lugar de tu ordenador.
En la siguiente sección, veremos cómo listar los paquetes npm instalados localmente.
Cómo Listar los Paquetes npm Instalados Localmente
Al igual que en la última sección, también podemos listar los paquetes npm instalados localmente.
Para ver una lista de los paquetes instalados localmente, ejecuta el siguiente comando en tu terminal:
npm listTienes que ejecutar el comando anterior en el directorio de tu proyecto para ver todos los paquetes instalados para ese proyecto en particular.
Cómo Buscar Paquetes npm
Hay más de 1,3 millones de paquetes en el registro de npm, todos con diferentes funcionalidades. El paquete adecuado depende de tus necesidades y objetivos.
Hay paquetes que es necesario utilizar cuando se trabaja con determinados stacks de desarrollo. Por ejemplo, un paquete popular en React es React Router, que se utiliza para el enrutamiento en React.
Del mismo modo, otros stacks tecnológicos requieren diferentes paquetes.
Puedes utilizar la barra de búsqueda del sitio web de npm para buscar paquetes y ver qué hace cada uno. La mayoría vienen con instrucciones de instalación y detalles de las características. Busca paquetes que se mantengan con regularidad, es decir, paquetes que sean probados, corregidos y mejorados a intervalos regulares por los desarrolladores de la comunidad.
Archivos y Carpetas npm Adicionales
Ahora que tenemos una sólida comprensión de lo que son los paquetes npm y cómo se utilizan, echemos un vistazo a algunos de los otros archivos y carpetas que intervienen en un proyecto basado en npm.
El Archivo Package.json
El archivo package.json nos ayuda a hacer un seguimiento de todos los paquetes instalados en un proyecto determinado. Al crear un nuevo proyecto, es importante empezar por crear este archivo.
Almacena información sobre un proyecto, como el nombre del proyecto, su versión, los scripts, las dependencias, etc.
Puedes hacerlo ejecutando el comando npm init o npm init -y en el terminal del proyecto. A continuación, sólo tienes que rellenar todas las preguntas que te hace el sistema al crear el archivo.
Tras generar el archivo package.json, todos los paquetes instalados, junto con sus nombres y versiones, se almacenarán en el archivo.
Otro uso importante del archivo package.json se ve cuando clonamos proyectos en GitHub. Cuando los desarrolladores envían su proyecto a un repositorio, dejan fuera la carpeta node_modules, que contiene nuestros paquetes y sus dependencias.
Para generar tu propia carpeta después de clonar un repo, tienes que ejecutar el comando npm install en el terminal de tu proyecto. Esto permitirá que npm recorra el archivo package.json del repositorio e instale todos los paquetes allí listados.
Una vez completada la instalación, podrás utilizar todos los paquetes instalados previamente para ese proyecto antes de que sea enviado a GitHub.
¿Qué son las Dependencias npm?
Cuando instalamos paquetes, se crea una carpeta node_modules en la que podemos ver otras carpetas, concretamente la carpeta de cada paquete y sus subcarpetas. Puede que te preguntes por qué están ahí esas otras carpetas si no las has instalado.
Pues bien, en tu archivo package.json, tus paquetes aparecen en la lista de dependencias porque tu proyecto «depende» de esos paquetes para poder trabajar.
Las carpetas adicionales creadas en tu carpeta node_modules son otros paquetes adicionales de los que dependen tus paquetes instalados para ofrecerte las mejores funcionalidades. Puedes comprobarlo fácilmente mirando el archivo package.json de un paquete instalado para ver sus dependencias.
¿Qué son los Scripts npm?
Los scripts npm son scripts personalizados definidos en el archivo package.json para automatizar ciertas tareas. También puedes definir tus propios scripts para automatizar varias tareas como minificar tu código CSS, reiniciar tu servidor cada vez que se realicen cambios, construir un proyecto para producción, etc.
Cuando creamos un archivo package.json, suele haber un script test que se genera junto con el archivo. Podemos utilizar los scripts para realizar una serie de tareas como iniciar un servidor, minificar nuestro CSS, empaquetar nuestro código para producción, etc.
Un ejemplo popular de uno de estos scripts es el npm run start de React, que pone en marcha nuestro servidor de desarrollo en localhost:3000.
Al igual que el script anterior, podemos ejecutar otros scripts utilizando esta sintaxis de comando:
npm run [script-name]Resumen
A lo largo de los años, npm se ha convertido en una necesidad en el desarrollo de aplicaciones web basadas en Node.js. npm nos da acceso a millones de proyectos desplegados por otros desarrolladores que puedes utilizar de forma gratuita para impulsar tu propio proyecto.
Hay una gran variedad de paquetes npm que van desde frameworks CSS, bundlers de archivos, frameworks JavaScript, herramientas de backend y mucho más. Estos proyectos también son seguros para que los utilicen otros desarrolladores, y muchos se mantienen y actualizan regularmente.
Con npm, el desarrollo de aplicaciones web se ha vuelto más fácil; no tenemos que volver a crear la rueda. Todo lo que tenemos que hacer es instalar el paquete de otro desarrollador y ahorrarnos horas de codificación.
Como desarrolladores, también podemos crear nuestros propios paquetes npm y publicarlos en el registro npm para que otros desarrolladores los utilicen. Al igual que los usuarios de la comunidad de WordPress contribuyen a la mejora y el éxito de la plataforma, los miembros de la comunidad de Node.js también pueden hacerlo.
¿Has creado alguna herramienta que te ayude en tu fase de desarrollo y que te gustaría que otros desarrolladores utilizaran? ¡Comparte tu opinión en la sección de comentarios!
