0Pricing
JavaScript Academy · Lección

package.json, scripts y deps frente a devDeps

Comprenda los campos de package.json, defina scripts sencillos y conozca la diferencia entre dependencies y devDependencies.

package.json, scripts y deps frente a devDeps es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 3 lecciones en total.

¿Por qué package.json?

Objetivo: lea y use package.json.

  • Campos clave: name, version, type
  • scripts: ejecutar comandos cortos
  • dependencies frente a devDependencies
  • Versiones semánticas (caret/tilde): nociones básicas para principiantes
package.json, scripts y deps frente a devDeps — ilustración 1

Campos de un vistazo

package.json es un manifiesto con información del proyecto, scripts y listas de dependencias.

// Emulate a minimal package.json as a JS object
const pkg = {
  name: "hello-app",
  version: "1.0.0",
  type: "module",
  scripts: {
    start: "node index.js",
    build: "echo building...",
    test: "echo tests..."
  },
  dependencies: {
    "chalk": "^5.3.0"
  },
  devDependencies: {
    "eslint": "^9.0.0"
  }
};

console.log("name:", pkg.name);
console.log("version:", pkg.version);
console.log("type:", pkg.type);
console.log("scripts:", Object.keys(pkg.scripts));
package.json, scripts y deps frente a devDeps — ilustración 2

Scripts por nombre

Añada comandos en scripts (por ejemplo, build, test) y ejecútelos con su gestor de paquetes.

// Tiny emulator for "npm run <name>"
function runScript(name) {
  const cmd = pkg.scripts[name];
  if (!cmd) {
    console.log("no such script:", name);
    return;
  }
  console.log("running:", name, "->", cmd);
}

runScript("build");
runScript("test");
runScript("missing");
package.json, scripts y deps frente a devDeps — ilustración 3

¿Qué va en cada lugar?

dependencies son necesarias cuando se ejecuta la aplicación; devDependencies son herramientas destinadas únicamente al desarrollo.

// List production deps vs development-time tools
function listDeps() {
  console.log("deps:", Object.keys(pkg.dependencies));
  console.log("devDeps:", Object.keys(pkg.devDependencies));
}

// Rule of thumb in comments:
// dependencies -> needed at runtime (your app uses them when running)
// devDependencies -> only for development (lint, test, build tools)

listDeps();
package.json, scripts y deps frente a devDeps — ilustración 4

Conceptos básicos de Semver

Semver expresa mediante rangos las actualizaciones permitidas: caret (minor+patch), tilde (patch) o una versión exacta.

// Semantic version ranges (intent only)
// ^1.2.3  -> allow minor/patch updates (1.x compatible)
// ~1.2.3  -> allow patch updates (1.2.x)
// 1.2.3   -> exact version

const ranges = ["^1.2.3", "~1.2.3", "1.2.3"];
for (const r of ranges) {
  console.log("range:", r);
}
package.json, scripts y deps frente a devDeps — ilustración 5

Notas prácticas

Consejos:

  • Mantenga los scripts cortos y claros (por ejemplo, build, test).
  • Bibliotecas de ejecución → dependencies; herramientas → devDependencies.
  • Empiece con rangos ^; bloquee versiones exactas más adelante si es necesario.
package.json, scripts y deps frente a devDeps — ilustración 6

Cuestionario sobre el campo scripts

Comprobación rápida: ¿dónde se encuentran los comandos?

package.json, scripts y deps frente a devDeps — ilustración 7

Repaso

Repaso: package.json enumera la información del proyecto y los scripts para ejecutar tareas, y separa las dependencies (ejecución) de las devDependencies (herramientas de desarrollo). Use rangos de Semver sencillos para mantenerse al día.

package.json, scripts y deps frente a devDeps — ilustración 8

Preguntas frecuentes

¿La lección «package.json, scripts y deps frente a devDeps» es gratis?

Sí — el texto completo de «package.json, scripts y deps frente a devDeps» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 3 lecciones en total.

¿Qué aprenderé en «package.json, scripts y deps frente a devDeps»?

Comprenda los campos de package.json, defina scripts sencillos y conozca la diferencia entre dependencies y devDependencies. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.

¿Cuánto tiempo toma la lección «package.json, scripts y deps frente a devDeps»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. package.json, scripts y deps frente a devDeps
  2. npx y rangos de versionado semántico
  3. Herramientas locales y globales, bins y flujos de trabajo de equipo
← Volver a JavaScript Academy