Usos Prácticos de los Scripts NPM Más Allá de Build y Start

Los desarrolladores frontend a menudo comienzan con comandos simples como npm run build o npm run start, pero los scripts NPM pueden hacer mucho más por tu flujo de trabajo. Puedes aprovechar los scripts NPM para automatizar tareas repetitivas, optimizar el desarrollo y hacer que tus proyectos sean más mantenibles.

¿Qué Son los Scripts NPM y Por Qué Usarlos?

Los scripts NPM son comandos personalizados definidos en tu archivo package.json bajo la sección "scripts". Proporcionan una forma simple de ejecutar herramientas de línea de comandos y automatizar tareas sin instalar paquetes globales o herramientas de construcción complejas.

{
  "name": "my-project",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

Las principales ventajas de los scripts NPM sobre ejecutores de tareas como Gulp o Grunt:

• Configuración cero: Úsalos directamente con cualquier proyecto npm
• Acceso directo a herramientas CLI: Sin capas de abstracción o plugins de los que preocuparse
• Seguimiento de dependencias: Las herramientas se instalan como dependencias del proyecto, asegurando que todos usen las mismas versiones
• Flujo de trabajo simplificado: No necesitas aprender la sintaxis de otra herramienta

10 Scripts NPM Prácticos para Desarrolladores Frontend

1. Linting y Formateo de Código

Un estilo de código consistente mejora la legibilidad y reduce errores. Agrega estos scripts para hacer lint y formatear tu código automáticamente:

"scripts": {
  "lint": "eslint src/**/*.js",
  "lint:fix": "eslint src/**/*.js --fix",
  "format": "prettier --write \"src/**/*.{js,jsx,css,scss,json}\""
}

Ejecuta npm run lint para verificar problemas o npm run format para formatear automáticamente tu código.

2. Limpieza de Directorios de Build

Antes de crear un nuevo build, limpia los artefactos de builds anteriores:

"scripts": {
  "clean": "rimraf dist",
  "prebuild": "npm run clean",
  "build": "webpack"
}

El script prebuild se ejecuta automáticamente antes de build, asegurando un estado limpio cada vez.

3. Ejecutar Pruebas con Diferentes Configuraciones

Crea varios scripts de prueba para diferentes escenarios:

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage",
  "test:e2e": "cypress run"
}

4. Gestión de Variables de Entorno

Configura diferentes entornos para desarrollo, pruebas y producción:

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack serve",
  "build:dev": "cross-env NODE_ENV=development webpack",
  "build:prod": "cross-env NODE_ENV=production webpack"
}

El paquete cross-env asegura que estos scripts funcionen en diferentes sistemas operativos.

5. Observar Cambios

Reconstruir automáticamente cuando los archivos cambien:

"scripts": {
  "watch:css": "sass --watch src/styles:dist/styles",
  "watch:js": "webpack --watch",
  "watch": "npm-run-all --parallel watch:*"
}

El paquete npm-run-all permite ejecutar múltiples scripts en paralelo.

6. Sincronización de Archivos de Entorno

Crea un script para copiar archivos de plantilla de entorno:

"scripts": {
  "sync-env": "node -e \"require('fs').copyFileSync('.env.example', '.env', fs.constants.COPYFILE_EXCL)\"",
  "postinstall": "npm run sync-env"
}

El hook postinstall se ejecuta automáticamente después de npm install, asegurando que los nuevos miembros del equipo obtengan el archivo de entorno.

7. Validación de Dependencias del Paquete

Verifica dependencias desactualizadas, duplicadas o vulnerables:

"scripts": {
  "check:deps": "npm outdated",
  "check:security": "npm audit",
  "check:duplicates": "npx depcheck"
}

8. Generación de Documentación

Genera automáticamente documentación a partir de comentarios en el código:

"scripts": {
  "docs": "jsdoc -c jsdoc.json",
  "predeploy": "npm run docs"
}

9. Flujos de Trabajo de Release Personalizados

Automatiza el versionado y releases:

"scripts": {
  "version:patch": "npm version patch",
  "version:minor": "npm version minor",
  "version:major": "npm version major",
  "release": "npm run build && npm publish"
}

10. Optimización de Assets

Comprime imágenes y otros assets:

"scripts": {
  "optimize:images": "imagemin src/images/* --out-dir=dist/images",
  "prebuild": "npm run clean && npm run optimize:images"
}

Técnicas Avanzadas de Scripts NPM

Encadenamiento de Scripts con Hooks Pre/Post

NPM ejecuta automáticamente scripts con prefijo “pre” o “post” antes o después del script principal:

"scripts": {
  "prebuild": "npm run lint",
  "build": "webpack",
  "postbuild": "npm run test"
}

Cuando ejecutas npm run build, automáticamente ejecuta prebuild, luego build, y después postbuild.

Pasar Argumentos a Scripts

Pasa argumentos a tus scripts usando --:

npm run lint -- --fix

Esto pasa la bandera --fix al comando de linting real.

Usar Variables de Entorno en Scripts

Accede a datos del package.json a través de variables de entorno:

"scripts": {
  "echo-version": "echo $npm_package_version"
}

Cuando ejecutas npm run echo-version, imprime la versión de tu paquete.

Compatibilidad Multiplataforma

Asegura que tus scripts funcionen en todos los sistemas operativos con estas herramientas:

1. rimraf - Alternativa multiplataforma a rm -rf
2. cross-env - Establece variables de entorno en todas las plataformas
3. npm-run-all - Ejecuta múltiples scripts en secuencia o paralelo

Ejemplo de scripts multiplataforma:

"scripts": {
  "clean": "rimraf dist",
  "copy": "copyfiles -u 1 src/**/*.html dist",
  "dev": "cross-env NODE_ENV=development npm-run-all clean copy --parallel watch:*"
}

Ejemplo del Mundo Real: Flujo de Trabajo Frontend Completo

Aquí tienes un conjunto completo de scripts para un proyecto frontend moderno:

{
  "scripts": {
    "clean": "rimraf dist",
    "lint:js": "eslint src/**/*.js --fix",
    "lint:css": "stylelint src/**/*.scss --fix",
    "lint": "npm-run-all --parallel lint:*",
    "test": "jest",
    "test:watch": "jest --watch",
    "format": "prettier --write \"src/**/*.{js,jsx,scss,json,md}\"",
    "validate": "npm-run-all --parallel lint test",
    "build:css": "sass src/styles:dist/styles --style compressed",
    "build:js": "webpack --mode production",
    "build": "npm-run-all clean lint --parallel build:*",
    "watch:css": "sass --watch src/styles:dist/styles",
    "watch:js": "webpack --watch",
    "serve": "browser-sync start --server dist --files dist",
    "dev": "npm-run-all clean --parallel watch:* serve",
    "prepublish": "npm run build",
    "version": "npm run format && git add -A src",
    "postversion": "git push && git push --tags"
  }
}

Esta configuración proporciona:

• Verificaciones de calidad de código con linting y pruebas
• Formateo automatizado
• Builds optimizados para producción
• Servidor de desarrollo con recarga en caliente
• Flujo de trabajo de gestión de versiones y publicación

Conclusión

Al implementar estos scripts NPM prácticos, optimizarás tu proceso de desarrollo, mejorarás la calidad del código y harás que tus proyectos sean más mantenibles. Comienza poco a poco agregando scripts para las tareas que realizas con más frecuencia, luego expande gradualmente tu conjunto de herramientas de automatización.

Preguntas Frecuentes