0Pricing
JavaScript Academy · Lektion

package.json, Skripte und deps vs. devDeps

Felder in package.json verstehen, einfache Skripte definieren und den Unterschied zwischen dependencies und devDependencies kennen

package.json, Skripte und deps vs. devDeps ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Warum package.json?

Ziel: Lesen und verwenden Sie package.json.

  • Wichtige Felder: name, version, type
  • scripts: kurze Befehle ausführen
  • dependencies und devDependencies
  • Semantische Versionen (Caret/Tilde) — ein Einsteigerüberblick
package.json, Skripte und deps vs. devDeps — Illustration 1

Felder auf einen Blick

package.json ist ein Manifest mit Projektinformationen, Skripten und Abhängigkeitslisten.

// 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, Skripte und deps vs. devDeps — Illustration 2

Skripte nach Namen

Fügen Sie Befehle unter scripts hinzu (z. B. build, test) und führen Sie sie mit Ihrem Paketmanager aus.

// 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, Skripte und deps vs. devDeps — Illustration 3

Was gehört wohin?

dependencies werden benötigt, wenn die App läuft; devDependencies sind ausschließlich Entwicklungswerkzeuge.

// 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, Skripte und deps vs. devDeps — Illustration 4

Semver-Grundlagen

Semver-Bereiche legen zulässige Aktualisierungen fest: Caret (Minor + Patch), Tilde (Patch) oder exakt.

// 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, Skripte und deps vs. devDeps — Illustration 5

Praktische Hinweise

Tipps:

  • Halten Sie Skripte kurz und verständlich (z. B. build, test).
  • Laufzeitbibliotheken → dependencies; Werkzeuge → devDependencies.
  • Beginnen Sie mit ^-Bereichen; sperren Sie später bei Bedarf exakte Versionen.
package.json, Skripte und deps vs. devDeps — Illustration 6

Quiz zum Feld scripts

Kurztest: Wo befinden sich Befehle?

package.json, Skripte und deps vs. devDeps — Illustration 7

Zusammenfassung

Zusammenfassung: package.json führt Projektinformationen und scripts zum Ausführen von Aufgaben auf und trennt dependencies (Laufzeit) von devDependencies (Entwicklungswerkzeuge). Verwenden Sie einfache Semver-Bereiche, um auf dem aktuellen Stand zu bleiben.

package.json, Skripte und deps vs. devDeps — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „package.json, Skripte und deps vs. devDeps“ kostenlos?

Ja — der vollständige Text von „package.json, Skripte und deps vs. devDeps“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „package.json, Skripte und deps vs. devDeps“?

Felder in package.json verstehen, einfache Skripte definieren und den Unterschied zwischen dependencies und devDependencies kennen Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.

Wie lange dauert die Lektion „package.json, Skripte und deps vs. devDeps“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. package.json, Skripte und deps vs. devDeps
  2. npx und Bereiche der semantischen Versionierung
  3. Lokale und globale Tools, Bins und teamfreundliche Workflows
← Zurück zu JavaScript Academy