DEV Community

Marco
Marco

Posted on • Originally published at blog.disane.dev

NPM: Der Paketmanager für dein Projekt 🪄

Erfahre alles über NPM, die Vor- und Nachteile eines Paketmanagers und wie du NPM in deinem Projekt nutzen kannst! 🪄


In der Welt der Softwareentwicklung ist ein Paketmanager wie NPM (Node Package Manager) unverzichtbar. NPM ist das Herzstück des Node.js-Ökosystems und ermöglicht Entwicklern, Bibliotheken und Frameworks effizient zu verwalten. In diesem Artikel werfen wir einen Blick auf die Vorteile eines Paketmanagers, die Nutzung von NPM in Projekten, die Erstellung eigener Pakete und wie man mit SemVer (Semantic Versioning) Updates von Abhängigkeiten handhabt.

npm | HomePreview image

Vorteile eines Paketmanagers 🎉

Ein Paketmanager bietet zahlreiche Vorteile:

  • Zentrale Verwaltung: Alle Abhängigkeiten eines Projekts werden zentral verwaltet.
  • Einfachere Installation: Bibliotheken und Frameworks können schnell und einfach installiert werden.
  • Versionskontrolle: Verschiedene Versionen von Paketen können einfach verwaltet werden.
  • Abhängigkeitsmanagement: Automatisches Herunterladen und Aktualisieren von Abhängigkeiten.
  • Gemeinschaft und Ökosystem: Zugriff auf eine riesige Anzahl von Open-Source-Bibliotheken.

Nutzung von NPM in einem Projekt 🚀

Installation von NPM

NPM wird standardmäßig mit Node.js installiert.

Node.js — Download Node.js®Preview imageNode.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Du kannst die Installation überprüfen, indem du folgende Befehle in der Konsole ausführst:

node -v
npm -v

Enter fullscreen mode Exit fullscreen mode

Initialisierung eines Projekts

Um ein neues Projekt mit NPM zu starten, führe den folgenden Befehl aus:

npm init

Enter fullscreen mode Exit fullscreen mode

Dieser Befehl führt dich durch eine Reihe von Fragen und erstellt eine package.json-Datei, die grundlegende Informationen über dein Projekt enthält.

Installation von Paketen

Um ein Paket zu installieren, benutze den Befehl:

npm install paketname

Enter fullscreen mode Exit fullscreen mode

Dieses Paket wird in deinem Projektverzeichnis im Ordner node_modules abgelegt und in der package.json unter dependencies eingetragen.

Semantic Versioning (SemVer) 📈

Versionierung

SemVer ist ein System zur Versionierung von Softwarepaketen, das drei Zahlen verwendet: Major.Minor.Patch (z.B. 1.0.0). Diese Zahlen bedeuten:

  • Major: Änderungen, die nicht rückwärtskompatibel sind.
  • Minor: Neue Funktionen, die rückwärtskompatibel sind.
  • Patch: Fehlerbehebungen, die rückwärtskompatibel sind.

Handhabung von Abhängigkeiten

In der package.json kannst du Abhängigkeiten mit speziellen Modifikatoren steuern:

  • Tilde (~): Installiert die neueste Patch-Version (z.B. ~1.2.3 installiert 1.2.x).
  • Caret (^): Installiert die neueste Minor-Version (z.B. ^1.2.3 installiert 1.x.x).
  • Exact (=): Installiert eine exakte Version (z.B. =1.2.3 installiert genau 1.2.3).

Beispiel für Abhängigkeiten:

"dependencies": {
  "express": "^4.17.1",
  "lodash": "~4.17.20"
}

Enter fullscreen mode Exit fullscreen mode

Wichtige Dateien in NPM 📂

package.json

Die package.json-Datei enthält Metadaten über dein Projekt sowie eine Liste der Abhängigkeiten. Beispiel:

{
  "name": "mein-projekt",
  "version": "1.0.0",
  "description": "Beschreibung des Projekts",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "mocha": "^8.0.0"
  }
}

Enter fullscreen mode Exit fullscreen mode

package-lock.json

Die package-lock.json-Datei wird automatisch generiert und enthält eine genaue Momentaufnahme der installierten Abhängigkeiten. Sie stellt sicher, dass das Projekt immer mit denselben Abhängigkeiten gebaut wird.

npm-shrinkwrap.json

Die npm-shrinkwrap.json-Datei ähnelt der package-lock.json, kann jedoch manuell erstellt und bearbeitet werden. Sie wird verwendet, um Abhängigkeiten für die Bereitstellung zu fixieren.

Weitere NPM-Befehle und Tipps 🛠️

NPM Update

Mit dem Befehl npm update kannst du alle Pakete in deinem Projekt auf die neueste Version aktualisieren, die mit den in der package.json angegebenen SemVer-Bereichen kompatibel ist.

npm update

Enter fullscreen mode Exit fullscreen mode

NPM Outdated

Um zu überprüfen, welche Pakete veraltet sind, kannst du den Befehl npm outdated verwenden. Dieser Befehl zeigt dir die aktuellen und neuesten Versionen der installierten Pakete an.

npm outdated
Enter fullscreen mode Exit fullscreen mode

NPM Uninstall

Falls du ein Paket entfernen möchtest, kannst du npm uninstall paketname verwenden. Dies entfernt das Paket aus dem node_modules-Verzeichnis und aus der package.json.

npm uninstall express
Enter fullscreen mode Exit fullscreen mode

NPM Audit

Sicherheit ist ein wichtiger Aspekt in der Softwareentwicklung. Mit npm audit kannst du dein Projekt auf Sicherheitslücken in den Abhängigkeiten überprüfen.

npm audit
Enter fullscreen mode Exit fullscreen mode

NPM Cache Clean

Manchmal kann es notwendig sein, den NPM-Cache zu leeren, um Probleme zu beheben. Dies kannst du mit dem Befehl npm cache clean --force tun.

npm cache clean --force

Enter fullscreen mode Exit fullscreen mode

Praktische Tipps für den Umgang mit NPM 🌟

Lock-Dateien Committen

Es ist eine gute Praxis, die package-lock.json- oder npm-shrinkwrap.json-Dateien in dein Versionskontrollsystem (z.B. Git) einzuchecken. Dies stellt sicher, dass alle Entwickler im Team dieselben Abhängigkeiten verwenden und mögliche Versionskonflikte vermieden werden.

Globale vs. lokale Pakete

NPM ermöglicht die Installation von Paketen sowohl global als auch lokal. Globale Pakete werden systemweit installiert und sind für alle Projekte verfügbar, während lokale Pakete nur für das jeweilige Projekt installiert werden. Verwende globale Pakete sparsam und nur für Werkzeuge, die systemweit benötigt werden (z.B. eslint).

npm install -g eslint
npm install --save-dev eslint

Enter fullscreen mode Exit fullscreen mode

Skripte für wiederkehrende Aufgaben

Nutze die Möglichkeit, benutzerdefinierte Skripte in der package.json zu definieren, um wiederkehrende Aufgaben zu automatisieren. Beispielsweise kannst du ein Skript für den Start des Entwicklungsservers und ein weiteres für die Durchführung von Tests erstellen.

"scripts": {
  "start": "node index.js",
  "test": "mocha"
}

Enter fullscreen mode Exit fullscreen mode

NPM Aliases

NPM ermöglicht es dir, Aliase für häufig verwendete Befehle zu erstellen, um die Befehlszeile effizienter zu nutzen. Du kannst Aliase in deiner Shell-Konfigurationsdatei (z.B. .bashrc oder .zshrc) definieren.

alias npi="npm install"
alias npu="npm update"
alias npun="npm uninstall"
Enter fullscreen mode Exit fullscreen mode

Erstellung eigener Pakete 📦

Vorbereitung

Um ein eigenes Paket zu erstellen, benötigst du eine package.json-Datei. Diese kann mit npm init erstellt werden.

Entwicklung

Schreibe den Code für dein Paket und stelle sicher, dass es in einer logischen Struktur organisiert ist.

Veröffentlichung

Um dein Paket im NPM-Repository zu veröffentlichen, benötigst du ein Konto bei npmjs.com. Melde dich an und führe folgende Befehle aus:

npm login
npm publish

Enter fullscreen mode Exit fullscreen mode

Dein Paket ist nun für die Öffentlichkeit zugänglich!

Nachteile von NPM: Große Ordner und Sicherheitsrisiken

Während NPM (Node Package Manager) eine wertvolle Ressource für Entwickler ist, bringt es auch einige Nachteile mit sich. In diesem Artikel werfen wir einen Blick auf die Probleme, die mit der Größe der Ordnerstruktur zusammenhängen, und diskutieren die Sicherheitsrisiken, die mit der Nutzung von Paketmanagern einhergehen. Außerdem betrachten wir die Alternative PNPM, die einige der Nachteile von NPM adressiert.

Nachteile von NPM 📦

Große Ordnerstruktur

Eines der häufigsten Probleme, die Entwickler mit NPM erleben, ist die enorme Größe der node_modules-Ordner. Dies kann verschiedene Herausforderungen mit sich bringen:

  • Speicherplatz: Der node_modules-Ordner kann schnell mehrere hundert Megabyte oder sogar Gigabyte groß werden, was viel Speicherplatz beansprucht.
  • Performance: Große Ordnerstrukturen können die Leistung von Tools und IDEs beeinträchtigen, insbesondere bei Dateioperationen wie Suchen, Indexieren und Synchronisieren.
  • Versionskonflikte: Durch die Verschachtelung von Abhängigkeiten kann es zu Versionskonflikten kommen, die schwer zu debuggen sind.

Aus gutem Grund gibt es dazu auch genügend Memes, die sich in der Entwickler-Szene etabliert haben, zu dem Thema.

npm ci vs. npm install — Which Should You Use in Your Node.js Projects? |  by Sonika | @Walmart | FrontEnd Developer | 10 Years | Medium

A comprehensive beginner's guide to NPM - Tabnine

Gru's Plan to cuteboi | Make nice javascript program; ez with npm; includes free cryptominer; includes free cryptominer | image tagged in memes,gru's plan,crypto,javascript,npm | made w/ Imgflip meme maker

Beispiel

Ein einfaches Projekt mit wenigen Abhängigkeiten kann schnell hunderte von Unterordnern und tausende von Dateien im node_modules-Verzeichnis haben. Dies liegt daran, dass jede Abhängigkeit ihre eigenen Abhängigkeiten hat, die wiederum ihre eigenen Abhängigkeiten haben können.

PNPM: Die Alternative 🚀

Was ist PNPM?

PNPM (Performant NPM) ist eine alternative Paketverwaltungslösung, die viele der Nachteile von NPM adressiert. PNPM verwendet einen anderen Ansatz zur Verwaltung von Abhängigkeiten, um Speicherplatz und Performance zu optimieren.

Vorteile von PNPM

  • Effiziente Speicherung: PNPM speichert alle Pakete in einem zentralen Verzeichnis auf deinem Computer und erstellt symbolische Links in den node_modules-Ordnern der Projekte. Dies reduziert die Speicherplatzanforderungen erheblich.
  • Schnellere Installation: Durch die zentrale Speicherung und das Verlinken von Paketen ist die Installation von Abhängigkeiten schneller.
  • Konsistenz: PNPM stellt sicher, dass alle Projekte dieselben Versionen von Abhängigkeiten verwenden, was Versionskonflikte reduziert.

Installation und Nutzung

Um PNPM zu installieren, kannst du den folgenden Befehl verwenden:

npm install -g pnpm

Enter fullscreen mode Exit fullscreen mode

Die Nutzung von PNPM ist ähnlich wie bei NPM:

pnpm install
pnpm add paketname
Enter fullscreen mode Exit fullscreen mode

Sicherheitsrisiken bei Paketmanagern ⚠️

Risiko durch Schadcode

Ein großes Risiko bei der Nutzung von Paketmanagern ist die Möglichkeit, dass jemand Schadcode in ein Paket einbringt. Dies kann schwerwiegende Konsequenzen haben, da viele Projekte und Unternehmen auf diese Pakete angewiesen sind. Es gibt mehrere bekannte Fälle, in denen dies passiert ist:

  • Event-Stream Vorfall (2018): Ein beliebtes Paket namens event-stream wurde kompromittiert, als der ursprüngliche Maintainer die Kontrolle an eine andere Person übergab. Der neue Maintainer fügte bösartigen Code hinzu, der versuchte, Kryptowährungen zu stehlen.

A post-mortem of the malicious event-stream backdoor | SnykPreview imageA look back at the chain of events that led to the use of the malicious npm package “flatmap-stream” and a reflection on what it means for the fragility of open source.

  • Colors.js und Faker.js Vorfall (2022): Der Maintainer dieser weit verbreiteten Pakete entschied sich, bösartigen Code in den Paketen zu veröffentlichen, der die Funktionalität absichtlich zerstörte, um gegen die Nutzung seiner Arbeit durch große Unternehmen zu protestieren.

The story behind colors.js and faker.js | Revenera BlogPreview imageThe bizarre case of the author who corrupted his own npm packages – colors.js and faker.js. Originally reported by Bleeping Computer on Jan 9th the author of npm packages colors.js and faker.js…

Schutzmaßnahmen 🛡️

Um sich vor solchen Risiken zu schützen, kannst du folgende Maßnahmen ergreifen:

  • Überprüfung der Pakete: Überprüfe die Popularität, die Anzahl der Downloads und die Wartungshistorie eines Pakets, bevor du es installierst.
  • Lock-Dateien verwenden: Nutze package-lock.json oder npm-shrinkwrap.json, um sicherzustellen, dass dieselben Versionen der Abhängigkeiten verwendet werden.
  • Regelmäßige Audits: Führe regelmäßige Sicherheitsüberprüfungen durch, z.B. mit npm audit oder ähnlichen Tools.

Beispiel für Sicherheitsüberprüfungen

npm audit
Enter fullscreen mode Exit fullscreen mode

Dieser Befehl überprüft deine Abhängigkeiten auf bekannte Sicherheitslücken und gibt Empfehlungen zur Behebung.

Fazit

NPM ist ein leistungsstarkes Werkzeug, das die Verwaltung von Abhängigkeiten erheblich vereinfacht. Mit der richtigen Nutzung von SemVer und den verschiedenen Dateien (package.json, package-lock.json und npm-shrinkwrap.json) kannst du sicherstellen, dass dein Projekt stabil und zukunftssicher bleibt.

Aber es bringt auch Nachteile wie große Ordnerstrukturen und Sicherheitsrisiken mit sich. Alternativen wie PNPM können helfen, einige dieser Probleme zu lösen, indem sie effizienter mit Speicherplatz umgehen und die Konsistenz der Abhängigkeiten verbessern. Es ist wichtig, sich der potenziellen Sicherheitsrisiken bewusst zu sein und geeignete Maßnahmen zu ergreifen, um deine Projekte zu schützen. Durch regelmäßige Audits und die sorgfältige Auswahl von Paketen kannst du die Sicherheit und Effizienz deiner Entwicklungsumgebung erheblich verbessern.

Probiere es selbst aus und entdecke die Vorteile, die NPM für deine Entwicklungsprojekte bietet!


Hast du Fragen oder möchtest mehr über ein bestimmtes Thema erfahren? Hinterlasse einen Kommentar und lass uns diskutieren! 😊


If you like my posts, it would be nice if you follow my Blog for more tech stuff.

Top comments (0)