¿Qué sucede cuando ejecutas comandos de npm?

Presionas Enter en un comando de npm y esperas. De repente, tu proyecto funciona. Parece magia.

No es magia. Es una serie de solicitudes de red, análisis de código y optimizaciones de archivos.

Deja de ejecutar comandos a ciegas. Comprende el motor detrás de estos 6 comandos principales.

  1. npm install Este comando lee tu package.json. Se comunica con un registro en la nube para encontrar tus dependencias. • Descarga los paquetes en la carpeta node_modules. • Resuelve conflictos de versiones. • Crea un package-lock.json para registrar las versiones exactas.

  2. npm run format:check Este es un paso de verificación. Utiliza herramientas como Prettier para escanear tus archivos. • Construye un diseño virtual de tu código. • Compara tu código con tus reglas de estilo. • Señala errores sin modificar tus archivos.

  3. npm run format Este comando corrige los problemas encontrados durante la verificación. • Ejecuta Prettier en tu proyecto. • Reescribe tus archivos para que coincidan con tus reglas de estilo. • Limpia el espaciado y el formato automáticamente.

  4. npm run lint Piensa en esto como un corrector ortográfico para tu código. ESLint busca errores como: • Errores de sintaxis. • Variables no utilizadas. • Importaciones faltantes. • Uso incorrecto de React Hooks.

  5. npm run build Este comando prepara tu aplicación para el mundo real. Crea una carpeta dist. • Realiza tree shaking para eliminar el código que no se utiliza. • Minifica el código eliminando espacios en blanco y acortando los nombres de las variables. • Empaqueta JavaScript, CSS y recursos en archivos optimizados. • Estos archivos están listos para ser desplegados en un servidor.

  6. npm run dev Esto inicia un servidor local para que puedas trabajar. • Utiliza Native ES Modules para compilar archivos solo cuando el navegador los solicita. • Utiliza Hot Module Replacement (HMR) para actualizar tu sitio instantáneamente sin necesidad de recargar la página.

  7. npm run preview Esta es tu comprobación final. Ignora tu código fuente y solo analiza la carpeta dist. • Simula cómo se comportará tu aplicación en un servidor real. • Te ayuda a detectar errores antes de desplegar a producción.

La terminal no es una caja negra. Comprender estas herramientas te ayuda a depurar más rápido cuando algo falla.

¿Qué comando cambió tu forma de programar una vez que aprendiste cómo funciona? Cuéntame abajo.

Fuente: https://dev.to/ashomondi/the-magic-under-the-terminal-what-actually-happens-when-you-run-npm-commands-13ba