CarlosSeijas
← Volver a los blogs

NPM: Guía Completa para Desarrolladores JavaScript

JavaScript
NPM: Guía Completa para Desarrolladores JavaScript

¿Qué tiene NPM que lo hace imprescindible?

Imagina estar trabajando en un proyecto y necesitar una funcionalidad específica. ¿Escribirías todo el código desde cero o usarías una solución ya probada? Los desarrolladores profesionales eligen la segunda opción, y ahí es donde entra npm.

En este artículo descubrirás por qué npm se ha convertido en una herramienta fundamental para cualquier desarrollador JavaScript. Te explicaré desde sus conceptos básicos hasta los comandos más útiles que utilizarás a diario.

Para cuando termines de leer, dominarás no solo npm install y npm run dev, sino también comandos más avanzados como npm ci o npm link que pueden ahorrarte horas de trabajo.

¿Qué es NPM? Más allá del acrónimo

NPM (Node Package Manager) es el gestor de paquetes por defecto para Node.js y el ecosistema de JavaScript. Su función principal es permitir instalar y gestionar dependencias para tus proyectos.

Las tres caras de NPM

NPM funciona como:

  1. Un repositorio de código: La mayor colección de paquetes de software de código abierto del mundo.
  2. Una herramienta de línea de comandos: Que te permite interactuar con dicho repositorio.
  3. Un registro online: Donde puedes buscar, publicar y gestionar paquetes en npmjs.com.

¿Por qué NPM es importante?

Cómo instalar NPM en tu sistema

NPM viene incluido con Node.js, por lo que al instalar Node también obtienes npm automáticamente.

Pasos para instalar Node.js y NPM:

  1. Ve a nodejs.org
  2. Descarga la versión LTS (Long-Term Support) recomendada para la mayoría de usuarios
  3. Sigue el asistente de instalación
  4. Verifica la instalación con:
node -v
npm -v

Estos comandos mostrarán las versiones instaladas de Node.js y npm respectivamente.

NPM Install: El comando más usado

El comando npm install es probablemente el que usarás con mayor frecuencia. Te permite añadir paquetes a tu proyecto.

Instalar un paquete específico

npm install nombre-del-paquete

Por ejemplo, para instalar React:

npm install react

Instalar múltiples paquetes

npm install paquete1 paquete2 paquete3

Instalar dependencias de desarrollo

Las dependencias de desarrollo son paquetes que solo necesitas durante el desarrollo, no en producción:

npm install nombre-del-paquete --save-dev

O usando la forma abreviada:

npm install nombre-del-paquete -D

Instalar todas las dependencias de un proyecto

Si acabas de clonar un repositorio, este comando instalará todas las dependencias definidas en el archivo package.json:

npm install

NPM Run Dev: Ejecutando tu entorno de desarrollo

El comando npm run dev es extremadamente común en frameworks modernos como Next.js, Vue.js o React.

npm run dev

Este comando no es nativo de npm, sino que ejecuta un script definido en tu archivo package.json:

"scripts": {
  "dev": "vite", // Ejemplo con Vite
  "start": "react-scripts start", // Ejemplo con Create React App
  "dev": "next dev" // Ejemplo con Next.js
}

¿Qué hace NPM Run Dev?

NPM CI: La alternativa profesional a NPM Install

El comando npm ci (Clean Install) está diseñado específicamente para entornos de integración continua y despliegues:

npm ci

Diferencias entre NPM CI y NPM Install:

  1. Más estricto: Requiere un archivo package-lock.json.
  2. Más rápido: Al no tener que resolver las dependencias, es más rápido que npm install.
  3. Más predecible: Siempre instala exactamente lo que está en el lock file.
  4. Borra node_modules: Elimina la carpeta node_modules antes de instalar.
  5. No modifica package.json ni package-lock.json: A diferencia de npm install que puede actualizarlos.

Cuándo usar NPM CI:

NPM Link: Desarrollando paquetes localmente

Si estás desarrollando tus propios paquetes npm, el comando npm link es invaluable:

npm link

Este comando crea un enlace simbólico entre tu paquete en desarrollo y la carpeta global de npm.

Uso práctico de NPM Link:

  1. En tu paquete:

    cd ruta/a/tu-paquete
    npm link
    
  2. En tu proyecto que usa ese paquete:

    cd ruta/a/tu-proyecto
    npm link nombre-de-tu-paquete
    

Esto permite probar cambios en tiempo real sin tener que publicar nuevas versiones.

Limpiando tu entorno con NPM Clean Cache

A veces, los problemas con npm pueden resolverse limpiando la caché:

npm cache clean --force

¿Cuándo deberías limpiar la caché de NPM?

NPM Delete: Eliminando paquetes correctamente

Para eliminar un paquete, puedes usar el comando npm uninstall (no existe un comando npm delete como tal):

npm uninstall nombre-del-paquete

Desinstalar dependencias de desarrollo:

npm uninstall nombre-del-paquete --save-dev

Eliminar un paquete globalmente:

npm uninstall -g nombre-del-paquete

El archivo package.json: La columna vertebral de tu proyecto

El archivo package.json es crucial para entender npm. Contiene metadatos sobre tu proyecto y lista sus dependencias.

Elementos clave del package.json:

{
  "name": "mi-proyecto",
  "version": "1.0.0",
  "description": "Descripción de mi proyecto",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "vite": "^4.4.0",
    "vitest": "^0.34.1"
  }
}

Iniciar un nuevo package.json:

npm init

O para aceptar todas las opciones por defecto:

npm init -y

Mejores prácticas al usar NPM

  1. Usa package-lock.json: Asegúrate de que este archivo se envíe al control de versiones.
  2. Especifica versiones exactas: Para dependencias críticas, considera usar versiones exactas.
  3. Scripts personalizados: Aprovecha la sección "scripts" para automatizar tareas comunes.
  4. Utiliza .npmrc: Para configuraciones personalizadas de npm.
  5. Considera npm ci: Para entornos de producción o CI.

Solución de problemas comunes con NPM

"Cannot find module"

npm install

Errores de permisos

sudo npm install -g nombre-del-paquete  # En Linux/Mac

O mejor, configura npm para que no requiera sudo:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

Problemas de versiones:

Si tienes conflictos de versiones, puedes probar:

npm update

O para un paquete específico:

npm update nombre-del-paquete

Alternativas a NPM que deberías conocer

A pesar de la popularidad de npm, existen alternativas:

  1. Yarn: Desarrollado por Facebook, con énfasis en seguridad y determinismo.
  2. pnpm: Más eficiente en el uso del espacio en disco.
  3. Bun: Un nuevo runtime y gestor de paquetes que promete ser más rápido.

Conclusión: Dominando NPM para ser más productivo

NPM es mucho más que una herramienta para instalar paquetes. Es el centro del ecosistema JavaScript moderno y dominar sus comandos como npm install, npm run dev, npm ci, npm link y npm cache clean te convertirá en un desarrollador más eficiente.

La próxima vez que inicies un proyecto, recuerda que tienes toda la potencia del repositorio más grande de código abierto del mundo a tu disposición. ¿Cuál es tu comando de npm favorito? ¿Hay alguna técnica específica que utilices con npm que quieras compartir?

Si este artículo te ha resultado útil, no dudes en compartirlo.