DEV Community

Cristian Fernando
Cristian Fernando

Posted on • Edited on

NPM Cheat Sheet

#node #npm #javascript #spanish

Índice

  1. Crear un archivo package.json
  2. Instalar una dependencia localmente
  3. Instalar una versión específica de un paquete
  4. Desinstalar un paquete
  5. Listar las dependencias instaladas
  6. Obtener información de un paquete en específico
  7. Listar las dependencias de una dependencia
  8. Listar paquetes que se pueden actualizar
  9. Referencias
  10. Conclusiones

1. Crear un archivo package.json

  • Crea un archivo package.json preguntandote por la configuración del proyecto en la consola: 
npm init
Enter fullscreen mode Exit fullscreen mode
  • Crea un archivo package.json por defecto (manera rápida): 
npm init --yes
npm init -y
Enter fullscreen mode Exit fullscreen mode

Tanto npm init --yes como npm init -y hacen lo mismo.

2. Instalar una dependencia localmente

  • Dependencias de producción 
//Comando largo
npm install [nombre-del-paquete]
// ó
npm install [nombre-del-paquete] --save

//Comando resumido
npm i [nombre-del-paquete]
// ó
npm i [nombre-del-paquete] --save
Enter fullscreen mode Exit fullscreen mode

El flag --save se usaba en versiones antiguas de Node, hoy ya no es necesario escribirlo, pero es probable que lo veas en algunas documentaciones.

  • Dependencias de desarrollo 
//Comando largo
npm install [nombre-del-paquete] --save-dev

//Comando corto
npm install [nombre-del-paquete] -D
Enter fullscreen mode Exit fullscreen mode

El flag --save-dev y -D hacen lo mismo, puedes usar el que te sea mas comodo.

3. Instalar una versión específica de un paquete 

npm i [nombre-del-paquete]@[version]
// npm i colors@1.3.2
Enter fullscreen mode Exit fullscreen mode

4. Desinstalar un paquete

Tanto dependencias de producción como de desarrollo, usa:

// dependencias locales:
//Comando largo
npm uninstall [nombre-del-paquete]

//Comando corto
npm un [nombre-del-paquete]

// dependencias globales:
//Comando largo
npm uninstall -g [nombre-del-paquete]

//Comando corto
npm un -g [nombre-del-paquete]
Enter fullscreen mode Exit fullscreen mode

5. Listar las dependencias instaladas 

// dependencias locales:
npm list
// dependencias globales:
npm list -g --depth=0
Enter fullscreen mode Exit fullscreen mode

6. Obtener información de un paquete en específico 

npm view [nombre-del-paquete]
Enter fullscreen mode Exit fullscreen mode

7. Listar las dependencias de una dependencia 

npm view [nombre-del-paquete] dependencies
Enter fullscreen mode Exit fullscreen mode

8. Listar paquetes que se pueden actualizar 

npm outdate
Enter fullscreen mode Exit fullscreen mode

9. Simular la instalación de un paquete 

npm i [nombre-del-paquete] --dry-run
// solo regresa la salida por consola pero no lo instala, útil para ver información del paquete
Enter fullscreen mode Exit fullscreen mode

10. Re instalar todos los paquetes de package.json 

npm install
npm i
Enter fullscreen mode Exit fullscreen mode

11. Instalar forzosamente un paquete 

npm install [nombre-del-paquete] --force
npm install [nombre-del-paquete] -f
Enter fullscreen mode Exit fullscreen mode

12. Actualizar la versión de todos los paquetes que lo necesiten 

npm update
Enter fullscreen mode Exit fullscreen mode

13. Actualizar la versión de un paquete en concreto 

npm install [nombre-del-paquete]@latest
Enter fullscreen mode Exit fullscreen mode

14. Modo verboso para cualquier comando 

[cualquier-comando] --dd
// esto activa el la salida verbosa de cualquier comando, util para debuggear
Enter fullscreen mode Exit fullscreen mode

15. Limpiar caché de npm 

npm cache clean -f
//verificar que el cache esta limpio:
npm cache verify
Enter fullscreen mode Exit fullscreen mode

16. Borrar la carpeta de node_modules 

// instalar paquete:
npm i -g rimraf
//ahora ejecutar:
rimraf [nombre-carpeta] // ej: rimraf node_modules
Enter fullscreen mode Exit fullscreen mode

17. Versionado de paquetes

Major: el valor que muestra la versión que contiene los cambios importantes del paquete
Minor: el valor que muestra la versión que contiene los cambios en funcionalidades, pero no representan un cambio significativo
Patch: el valor que muestra la versión que contiene cambios rápidos para solucionar problemas de seguridad o bugs.

version

Existen dos símbolos que acompañan a este versionado, que sirven para actualizar las versiones minor y patch del paquete:

Caret (^): Permite actualizar las versiones minor y patch
Tilde (~): Permite actualizar las versiones patch
Por ejemplo, tenemos la versión “5.2.3”:

Si tiene el carret ^, actualizará la versión minor y patch, por lo que tendrás versiones como “^5.3.3”, “^5.4.3”, “^5.4.4”, etc.
Si tiene la tilde ~, actualizará la versión de patch, por lo que tendrás versiones como “~5.2.4”, “~5.2.5”, “~5.2.6”, etc.
Lo recomendable es quitar estos símbolos y tener la versión exacta para evitar problemas de versionado, principalmente con paquetes que los mantienen pocas personas o no son fiables.

Puedes encontrar un Cheat Sheet más completo en este link

10. Conclusiones

  • A mi criterio estos son los comandos mas usados con npm.
  • No los memorices, para eso está este pequeño NPM Cheat Sheet.

11. Referencias

Quiza esto sea de tu interés:

duxtech

Adios FontAwesome, Hola Tabler Icons

Cristian Fernando ・ Jun 17 '21

#css #html #javascript #webdev
duxtech

3 métodos muy útiles para objetos en Javascript

Cristian Fernando ・ May 21 '21

#javascript #webdev #frontend #spanish
duxtech

Las mejores guías completas para Flexbox y CSSGrid 😎

Cristian Fernando ・ May 19 '21

#css #html #webdev #spanish

img

Top comments (0)

Read next

hamzakhan profile image

🚀 The Rise of Bun.js: Why It’s More Than Just Another JavaScript Runtime 🥖

Hamza Khan -

araldhafeeri profile image

Designing and Implementing Ant Design Global App Tour for React Apps.

Ahmed Rakan -

dsychin profile image

Lessons Learned Migrating from React CRA & Jest to Vite & Vitest

Desmond Chin -

prince_beec5ccde00b7c6c73 profile image

👻 Scary Ghost Cursor with Smoke Trail! 💀 code using html5,css3 and javascript

Prince -