0Pricing
Frontend Academy · Lektion

npm und package.json: Abhängigkeiten und Scripts

Initialisieren Sie ein Projekt mit npm init, fügen Sie Laufzeit- und Entwicklungsabhängigkeiten hinzu, schreiben Sie wiederverwendbare npm-Scripts und verstehen Sie semver.

npm und package.json: Abhängigkeiten und Scripts ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist npm?

npm (Node Package Manager) verwaltet Projektabhängigkeiten und Scripts. Es liest package.json, um zu ermitteln, was installiert werden soll, und schreibt package-lock.json, um exakte Versionen zu speichern. In der npm-Registry sind mehr als zwei Millionen Pakete veröffentlicht.

Ein Projekt initialisieren

npm init -y erstellt eine package.json mit Standardwerten. Das Flag -y übernimmt alle Standardwerte ohne Rückfragen.

mkdir my-project && cd my-project
npm init -y
# Creates package.json

Die Datei package.json

Wichtige Felder sind: name, version, description, main (Einstiegspunkt), scripts, dependencies, devDependencies.

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Pakete installieren

npm install package fügt ein Paket zu den Abhängigkeiten hinzu. npm install -D package fügt es zu den devDependencies hinzu (in der Produktion nicht erforderlich). npm install ohne Argumente installiert alles aus package.json.

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

Semantische Versionierung

npm verwendet SemVer: major.minor.patch. Das Präfix ^ erlaubt kompatible Aktualisierungen (mit derselben Major-Version). Das Präfix ~ erlaubt nur Patch-Aktualisierungen. Exakte Versionen haben kein Präfix.

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

npm-Scripts

Definieren Sie Befehle im Feld scripts. Führen Sie sie mit npm run scriptname aus. Integrierte Scripts (test, start) können Sie direkt mit npm test oder npm start ausführen.

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

npm run und npx

npm run führt ein Script aus package.json aus. npx führt ein Paket aus node_modules aus oder lädt es vorübergehend herunter und führt es aus – nützlich für einmalige Befehle wie npx create-vite@latest.

package-lock.json

package-lock.json speichert die exakte Version jedes installierten Pakets (einschließlich seiner transitiven Abhängigkeiten). Committen Sie die Datei, damit alle Entwickler und CI dieselben Versionen verwenden. Bearbeiten Sie sie niemals manuell.

node_modules und .gitignore

Committen Sie node_modules niemals – der Ordner kann mehrere hundert MB groß sein. Fügen Sie ihn immer zu .gitignore hinzu. Jeder kann ihn mit npm install wiederherstellen.

# .gitignore
node_modules/

Pakete aktualisieren und entfernen

npm update aktualisiert Pakete innerhalb ihres Semver-Bereichs. npm outdated zeigt an, was aktualisiert werden kann. npm uninstall package entfernt ein Paket.

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm vs yarn vs pnpm

Alternativen zu npm: yarn (schneller, Workspaces, Plug'n'Play), pnpm (speichereffizienter Symlink-Speicher, strikte Abhängigkeiten, am schnellsten für Monorepos). Die grundlegenden Befehle ähneln sich bei allen drei.

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

Kurztest

Was bewirkt das Flag -D beim Ausführen von npm install -D jest?

Zusammenfassung: npm und package.json

npm init erstellt package.json. npm install fügt Abhängigkeiten hinzu. -D steht für devDependencies. ^ bedeutet bei Semver kompatible Aktualisierungen. Scripts führen mit npm run Befehle aus. package-lock.json hält die exakten Versionen fest — committen Sie die Datei. node_modules gehört in .gitignore. npx führt einmalige Paketbefehle aus.

Häufig gestellte Fragen

Ist die Lektion „npm und package.json: Abhängigkeiten und Scripts“ kostenlos?

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

Was lerne ich in „npm und package.json: Abhängigkeiten und Scripts“?

Initialisieren Sie ein Projekt mit npm init, fügen Sie Laufzeit- und Entwicklungsabhängigkeiten hinzu, schreiben Sie wiederverwendbare npm-Scripts und verstehen Sie semver. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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 2 von 4.

Wie lange dauert die Lektion „npm und package.json: Abhängigkeiten und Scripts“?

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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. ES-Module: import, export und dynamischer Import
  2. npm und package.json: Abhängigkeiten und Scripts
  3. Vite: Dev-Server und Build
  4. Bundling-Konzepte: Tree Shaking und Code Splitting
← Zurück zu Frontend Academy