Node.js y npm: hoja de ruta para el desarrollo web moderno

Al finalizar este tema

Podrás responder a la pregunta: "¿Por qué es necesario instalar Node.js para el desarrollo frontend?".

La época en que bastaba con un solo archivo HTML para crear un sitio web

Hasta principios de la década de 2010, la situación era así:

index.html  ← Escribe HTML y
style.css   ← Inserta CSS y
script.js   ← Inserta jQuery y
Ábrelo en el navegador  ← Fin

No hacía falta Node.js. ¿Servidores? Eso era tarea de PHP. Ahora, para ejecutar un solo proyecto de React, empezamos por npm install. ¿Qué ha cambiado?

Node.js: JavaScript fuera del navegador

JavaScript era originalmente un lenguaje que solo funcionaba dentro del navegador. Node.js es el entorno de ejecución que permite ejecutarlo también fuera del navegador.

# Ejecuta JavaScript sin navegador
node hello.js

Esto hizo posible dos cambios:

1. Ahora se pueden crear servidores con JavaScript: el frontend y el backend comparten el mismo lenguaje.
2. Ahora se pueden crear herramientas de desarrollo con JavaScript: Webpack, Vite, ESLint y Prettier funcionan todos sobre Node.js.

Actualmente, los desarrolladores frontend instalan Node.js no para crear servidores, sino porque las herramientas de desarrollo, como los compiladores, linters y bundlers, se ejecutan todos sobre Node.js.

npm: el sistema para usar código creado por otros

npm (Node Package Manager) es el repositorio de código compartido más grande del mundo. Tiene registrados más de 2 millones de paquetes.

npm install axios    # Instala la biblioteca de solicitudes HTTP
npm install lodash   # Instala la colección de funciones utilitarias

Al instalarlo, el código se descarga en la carpeta node_modules/ y se registra en package.json.

{
  "dependencies": {
    "axios": "^1.6.0",
    "lodash": "^4.17.21"
  }
}

package.json es un archivo de especificación que indica: "este proyecto utiliza estos paquetes". Si otra persona ejecuta solo npm install, se configurará el mismo entorno.

Sin embargo, al abrir node_modules, se encuentran miles de carpetas. Aunque solo se haya instalado un paquete, ese paquete utiliza otros, y esos a su vez utilizan otros... Así comienza el infierno de las dependencias. npm gestiona automáticamente este complejo árbol de dependencias.

"¿Por qué hay que instalar tanto para empezar con React?"

npx create-react-app my-app
cd my-app
npm start

Lo que hace internamente esta línea:

• React (framework de UI)
• Webpack (bundler: combina varios archivos en uno solo)
• Babel (transpilador: convierte la sintaxis moderna para navegadores antiguos)
• ESLint (linter)
• Decenas de otras dependencias secundarias

El desarrollo web moderno ya no consiste en "abrir un solo archivo en el navegador", sino en "combinar cientos de módulos mediante un pipeline de construcción". Todo este pipeline se ejecuta sobre Node.js.

¿Por qué node_modules es tan grande?

$ du -sh node_modules
812M    node_modules
$ find node_modules -type d | wc -l
28437

No es inusual que el node_modules de un proyecto React supere los 800 MB. Esto se debe a las cadenas de dependencias, donde un paquete utiliza otro y este, a su vez, utiliza otro más.

Esta es la razón por la que "es imprescindible añadir .gitignore a node_modules/". Si solo se suben package.json y package-lock.json a Git, otra persona podrá recrear el mismo entorno con npm install.

npx, yarn, pnpm: variantes de npm

npm no es la única opción:

# npx — Ejecuta sin instalar (integrado desde npm 5.2+)
npx create-next-app my-app   # Ejecuta directamente sin instalación global

# yarn — Alternativa creada por Facebook (instalación más rápida, archivo lock)
yarn add axios

# pnpm — Eficiente en disco (comparte paquetes mediante enlaces duros)
pnpm install axios

Los tres instalan paquetes en node_modules de la misma manera. El equipo solo debe elegir uno para usarlo. Hoy en día, npm es mucho más rápido, por lo que, a menos que haya una razón específica, npm es suficiente.

Idea clave: Node.js es un entorno de ejecución que permite ejecutar JavaScript fuera del navegador, y npm es un sistema para utilizar código creado por otros. Los desarrolladores front-end instalan Node.js no para crear servidores, sino porque todas las herramientas de desarrollo se ejecutan sobre Node.js.