paquetes-windows
English

npm scripts y herramientas de build: Vite, Webpack, ESLint y Prettier con Cerewro

Configura un workflow de desarrollo moderno con Node.js: npm scripts personalizados, bundlers (Vite, Webpack), linters (ESLint), formateadores (Prettier) y hot-reload. Todo orquestado desde Cerewro.

Equipo Cerewro
npm scripts webpack vite eslint prettier build

npm scripts y herramientas de build con Cerewro

Un workflow de desarrollo moderno necesita más que solo npm install. Los npm scripts, bundlers como Vite o Webpack, linters y formateadores forman el esqueleto de cualquier proyecto profesional. Cerewro puede configurarlo todo desde el chat.

npm scripts: automatizar tareas del proyecto

package.json con scripts completos
{
  "scripts": {
    "start":      "node dist/index.js",
    "dev":        "nodemon src/index.js",
    "build":      "tsc && vite build",
    "preview":    "vite preview",
    "test":       "jest --coverage",
    "test:watch": "jest --watch",
    "lint":       "eslint src --ext .js,.ts",
    "lint:fix":   "eslint src --fix",
    "format":     "prettier --write src/**/*",
    "clean":      "rimraf dist",
    "prepare":    "husky install"
  }
}
Ejecutar scripts
npm run dev          # servidor de desarrollo
npm run build        # construir para producción
npm test             # ejecutar tests
npm run lint:fix     # corregir errores de linting automáticamente

Vite: el bundler moderno (recomendado)

Crear proyecto con Vite desde Cerewro
Crea un proyecto con Vite para React + TypeScript en C:\proyectos\mi-app-vite
Comandos Vite
# Nuevo proyecto Vite
npm create vite@latest mi-app -- --template react-ts

# Opciones de template disponibles:
# vanilla, vanilla-ts, vue, vue-ts, react, react-ts
# preact, lit, svelte, svelte-ts, solid, qwik

cd mi-app
npm install
npm run dev      # http://localhost:5173 (hot reload automático)
npm run build    # genera carpeta dist/ optimizada
npm run preview  # previsualizar build de producción

ESLint + Prettier: código limpio y consistente

Configurar ESLint y Prettier
# Instalar dependencias
npm install --save-dev eslint prettier eslint-config-prettier

# Inicializar ESLint
npx eslint --init

# .eslintrc.json básico
{
  "extends": ["eslint:recommended", "prettier"],
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off"
  }
}

# .prettierrc básico
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

TypeScript: añadir tipos al proyecto

Configurar TypeScript en proyecto Node.js
npm install --save-dev typescript @types/node ts-node

# Generar tsconfig.json
npx tsc --init

# Configuración recomendada en tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}
Pnpm como alternativa a npm: pnpm es hasta 3x más rápido y usa 50% menos espacio en disco gracias a un almacén global de paquetes. Instálalo con npm install -g pnpm y úsalo exactamente igual que npm.