Scripts npm personalizados: automatización sin dolor de cabeza

Los scripts npm son la forma más directa de automatizar tareas. Desde ejecutar tests hasta construir tu aplicación, aprenderás a configurarlos y ejecutarlos correctamente. Descubre también los scripts lifecycle que npm ejecuta automáticamente.

Los scripts npm transforman comandos largos y difíciles de recordar en atajos simples. En lugar de escribir 'node_modules/.bin/eslint src/', simplemente ejecutas 'npm run lint'. Esta simplicidad es la razón por la que cada proyecto profesional usa scripts npm.

En esta lección vas a aprender a crear scripts personalizados, entender los scripts lifecycle de npm y organizar tus tareas de desarrollo de forma eficiente. Verás que la automatización no tiene por qué ser compleja.

Al terminar, tendrás un package.json con scripts útiles que simplificarán tu flujo de trabajo diario.

  • Todo lo que necesitas saber sobre scripts antes de crear el primero.
  • Los scripts npm viven en el campo 'scripts' del package.json. Cada clave es el nombre del script y cada valor es el comando a ejecutar. Ejecutas los personalizados con 'npm run nombre-script' y los predefinidos con solo el nombre (npm test, npm start).
  • Cuando ejecutas un script, npm busca primero en node_modules/.bin, lo que significa que puedes ejecutar binaries de tus dependencias directamente sin rutas absolutas.
  • Se definen en el campo scripts de package.json
  • Se ejecutan con npm run [nombre]

Anatomía de un script npm

Todo lo que necesitas saber sobre scripts antes de crear el primero.

Los scripts npm viven en el campo 'scripts' del package.json. Cada clave es el nombre del script y cada valor es el comando a ejecutar. Ejecutas los personalizados con 'npm run nombre-script' y los predefinidos con solo el nombre (npm test, npm start).

Cuando ejecutas un script, npm busca primero en node_modules/.bin, lo que significa que puedes ejecutar binaries de tus dependencias directamente sin rutas absolutas.

  • Se definen en el campo scripts de package.json
  • Se ejecutan con npm run [nombre]
  • Tienen acceso a binaries en node_modules/.bin

Scripts predefinidos de npm

Estos scripts tienen significados especiales que npm reconoce.

Algunos scripts tienen significados especiales: 'start', 'test', 'stop' y 'restart' se pueden ejecutar sin 'run' (npm start, npm test). Pero los más interesantes son los lifecycle scripts que npm ejecuta automáticamente en ciertos momentos.

Los lifecycle scripts incluyen 'prepublish', 'postinstall', 'prepublishOnly' y se ejecutan automáticamente cuando ocurre el evento correspondiente. Por ejemplo, 'postinstall' se ejecuta después de cada npm install.

  • start, test, stop, restart: ejecutables con npm [nombre]
  • pre/post hooks: ejecuta automáticamente antes/después
  • postinstall: ideal para verificar dependencias

Scripts útiles que todo proyecto debería tener

Estos scripts cubrirán el 90% de tus necesidades.

Todo proyecto moderno necesita al menos: un script de desarrollo (dev o start), un script de build para producción, un script de test, y optionally un script de lint para verificar código.

Vamos a ver ejemplos reales que puedes copiar y adaptar a tu proyecto.

Pasar parámetros y encadenar comandos

Haz que tus scripts sean flexibles y poderosos.

Puedes pasar argumentos a tus scripts usando '--'. Por ejemplo, 'npm run test -- --coverage' pasa '--coverage' al comando test. También puedes encadenar comandos con '&&' (ejecuta el segundo si el primero termina bien) o ';' (ejecuta ambos).

Para scripts más complejos, considera usar npm-run-all o concurrently para ejecutar múltiples comandos en paralelo o serie.

Pre y post hooks: ejecuta tareas antes y después

Los hooks pre/post ejecutan scripts automáticamente.

Si creas un script llamado 'prebuild', npm lo ejecutará automáticamente antes de ejecutar 'build'. Lo mismo aplica para 'post' (después). Esto es útil para limpiar directorios, verificar condiciones o preparar archivos.

El orden de ejecución es: pre[nombre] → [nombre] → post[nombre]. Si el script principal falla, los post no se ejecutan.

NPM
05

Scripts npm personalizados: automatización sin dolor de cabeza

Los scripts npm son la forma más directa de automatizar tareas. Desde ejecutar tests hasta construir tu aplicación, aprenderás a configurarlos y ejecutarlos correctamente. Descubre también los scripts lifecycle que npm ejecuta automáticamente.

Código del tema: npm run

📘 Teoría

Anatomía de un script npm

Todo lo que necesitas saber sobre scripts antes de crear el primero.

Los scripts npm viven en el campo 'scripts' del package.json. Cada clave es el nombre del script y cada valor es el comando a ejecutar. Ejecutas los personalizados con 'npm run nombre-script' y los predefinidos con solo el nombre (npm test, npm start).

Cuando ejecutas un script, npm busca primero en node_modules/.bin, lo que significa que puedes ejecutar binaries de tus dependencias directamente sin rutas absolutas.

  • Se definen en el campo scripts de package.json
  • Se ejecutan con npm run [nombre]
  • Tienen acceso a binaries en node_modules/.bin
Ejemplo básico de scripts
{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "webpack --mode production"
  }
}

Scripts predefinidos de npm

Estos scripts tienen significados especiales que npm reconoce.

Algunos scripts tienen significados especiales: 'start', 'test', 'stop' y 'restart' se pueden ejecutar sin 'run' (npm start, npm test). Pero los más interesantes son los lifecycle scripts que npm ejecuta automáticamente en ciertos momentos.

Los lifecycle scripts incluyen 'prepublish', 'postinstall', 'prepublishOnly' y se ejecutan automáticamente cuando ocurre el evento correspondiente. Por ejemplo, 'postinstall' se ejecuta después de cada npm install.

  • start, test, stop, restart: ejecutables con npm [nombre]
  • pre/post hooks: ejecuta automáticamente antes/después
  • postinstall: ideal para verificar dependencias

Scripts útiles que todo proyecto debería tener

Estos scripts cubrirán el 90% de tus necesidades.

1

Todo proyecto moderno necesita al menos: un script de desarrollo (dev o start), un script de build para producción, un script de test, y optionally un script de lint para verificar código.

2

Vamos a ver ejemplos reales que puedes copiar y adaptar a tu proyecto.

Scripts recomendados para proyectos
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest",
    "test:watch": "vitest --watch",
    "lint": "eslint src --ext .js,.jsx",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write ."
  }
}

Pasar parámetros y encadenar comandos

Haz que tus scripts sean flexibles y poderosos.

Puedes pasar argumentos a tus scripts usando '--'. Por ejemplo, 'npm run test -- --coverage' pasa '--coverage' al comando test. También puedes encadenar comandos con '&&' (ejecuta el segundo si el primero termina bien) o ';' (ejecuta ambos).

Para scripts más complejos, considera usar npm-run-all o concurrently para ejecutar múltiples comandos en paralelo o serie.

Parámetros y encadenamiento
# Pasando argumentos
npm run test -- --coverage

# Encadenando comandos
npm run lint && npm run test

# Multiple commands
npm run build && npm run deploy

Pre y post hooks: ejecuta tareas antes y después

Los hooks pre/post ejecutan scripts automáticamente.

1

Si creas un script llamado 'prebuild', npm lo ejecutará automáticamente antes de ejecutar 'build'. Lo mismo aplica para 'post' (después). Esto es útil para limpiar directorios, verificar condiciones o preparar archivos.

2

El orden de ejecución es: pre[nombre] → [nombre] → post[nombre]. Si el script principal falla, los post no se ejecutan.

Ejemplo de pre/post hooks
{
  "scripts": {
    "prebuild": "rimraf dist",
    "build": "webpack --mode production",
    "postbuild": "cp -r dist/* ../public/"
  }
}

🧪 Aprende probando

Ejemplo Demo: crear scripts para un proyecto Añade scripts útiles a un package.json existente.

🏁 Retos

Reto Reto 1: Crear scripts de desarrollo Añade scripts para dev, build y test a tu proyecto.
Reto Reto 2: Crear un pre hook Crea un script prebuild que limpie el directorio dist.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre NPM.

Test de NPM

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .