Bei der Erstellung von Projekten verwendet jeder von uns verschiedene Tools, um die Entwicklung einfacher und schneller zu machen. Meistens werden diese Tools von anderen Entwicklern erstellt und zur kostenlosen Nutzung veröffentlicht.

Stell dir vor, du baust dein eigenes CSS-Framework: Du würdest deine eigenen Designsysteme, Utility-Klassen, verschiedene Farben und ihre Schattierungen, tausende Zeilen Sass (die schließlich zu CSS kompiliert werden), zahlreiche benutzerdefinierte Komponenten, Tests für Bugs und die Finanzierung erstellen, wenn andere Entwickler dir beim Aufbau eines solchen Projekts helfen. Das kann eine mühsame – und teure – Arbeit sein.

Aber dank des immer größer werdenden Pools an kostenlosen, von Entwicklern erstellten Ressourcen ist es einfacher denn je, all diese Kosten und Mühen zu umgehen.

In diesem Tutorial sprechen wir über npm (Node package manager), ein JavaScript-Online-Repository für Open-Source-Node.js-Pakete. Wir lernen, was npm ist, wie man es benutzt, welchen Zweck die Pakete haben und wie man mit ihnen lokal und remote interagiert.

Außerdem lernen wir die Befehlszeilenschnittstelle (CLI) kennen und erfahren etwas über Abhängigkeiten, Skripte und die Datei package.json.

Was ist npm (Node Package Manager)?

Screenshot der npm-Startseite
npm-Startseite

Auch wenn du verschiedene Varianten der Bedeutung von npm siehst, steht das Akronym für „Node Package Manager“

npm ist ein Paketmanager für Node.js-Projekte, der für die öffentliche Nutzung zur Verfügung steht. Projekte, die in der npm-Registry verfügbar sind, werden „Pakete“ genannt

npm ermöglicht es uns, Code, der von anderen geschrieben wurde, einfach zu nutzen, ohne dass wir ihn während der Entwicklung selbst schreiben müssen.

In der npm-Registry gibt es über 1,3 Millionen Pakete, die von mehr als 11 Millionen Entwicklern auf der ganzen Welt genutzt werden. (Wir werden später in diesem Leitfaden mehr über Pakete sprechen)

Warum npm benutzen?

Hier sind einige der Gründe, warum du npm verwenden solltest:

  1. Damit kannst du Bibliotheken, Frameworks und andere Entwicklungswerkzeuge für dein Projekt installieren, ähnlich wie eine mobile Anwendung aus einem App Store.
  2. Du erhältst Zugang zu sicheren Node.js-Projekten für die Entwicklung.
  3. Es hilft dir, die Entwicklungsphase zu beschleunigen, indem du vorgefertigte Abhängigkeiten nutzt.
  4. npm bietet dir eine große Auswahl an kostenlosen Tools.
  5. Die Verwendung von npm-Befehlen erfordert nicht viel Lernaufwand, da sie leicht zu verstehen und zu nutzen sind.

Als Nächstes sprechen wir über die npm-Befehlszeilenschnittstelle.

Die npm-Befehlszeilenschnittstelle (CLI)

Die Befehlszeilenschnittstelle von npm wird verwendet, um verschiedene Befehle auszuführen, wie z. B. Pakete zu installieren und zu deinstallieren, die npm-Version zu überprüfen, Paketskripte auszuführen, die package.json-Datei zu erstellen und vieles mehr.

Im weiteren Verlauf dieses Leitfaden werden wir einige Anwendungsfälle der Kommandozeilenschnittstelle kennenlernen.

Auf einem Windows-Computer nennen wir die Befehlszeilenschnittstelle normalerweise Eingabeaufforderung. Auf einem Mac-Computer wird sie Terminal genannt.

Wichtige npm-Befehle und Aliase

In diesem Abschnitt gehen wir auf einige der am häufigsten verwendeten npm-Befehle ein und erklären, was sie bewirken.

npm install

Mit diesem Befehl kannst du Pakete installieren. Du kannst Pakete entweder global oder lokal installieren. Wenn ein Paket global installiert wird, können wir die Funktionen des Pakets von jedem beliebigen Verzeichnis auf unserem Computer aus nutzen.

Wenn wir ein Paket hingegen lokal installieren, können wir es nur in dem Verzeichnis nutzen, in dem es installiert wurde. Kein anderer Ordner oder eine andere Datei auf unserem Computer kann das Paket nutzen.

npm uninstall

Mit diesem Befehl kannst du ein Paket deinstallieren.

npm init

Der Befehl init wird verwendet, um ein Projekt zu initialisieren. Wenn du diesen Befehl ausführst, wird eine package.json-Datei erstellt.

Wenn du npm init aufrufst, wirst du aufgefordert, bestimmte Informationen über das Projekt anzugeben, das du initialisierst. Dazu gehören der Name des Projekts, der Lizenztyp, die Version und so weiter.

Wenn du die Informationen nicht selbst eingeben willst, kannst du einfach den Befehl npm init -y ausführen.

npm update

Mit diesem Befehl aktualisierst du ein npm-Paket auf seine neueste Version.

npm restart

Wird verwendet, um ein Paket neu zu starten. Du kannst diesen Befehl verwenden, wenn du ein bestimmtes Projekt stoppen und neu starten möchtest.

npm start

Wird verwendet, um ein Paket bei Bedarf zu starten.

npm stop

Stoppt die Ausführung eines Pakets.

npm version

Zeigt dir die aktuelle npm-Version an, die auf deinem Computer installiert ist.

npm publish

Verwendet, um ein npm-Paket in der npm-Registry zu veröffentlichen. Diese Funktion wird meistens verwendet, wenn du dein eigenes Paket erstellt hast.

So installierst du npm

Um npm zu installieren, musst du zunächst Node.js auf deinem Computer installieren. Gehe dazu auf die Node.js-Webseite und lade es herunter. Wir empfehlen, die LTS-Version herunterzuladen, da dies die stabilste Version von Node.js ist.

Mit der Installation von Node.js wird automatisch auch npm installiert – eine separate Installation ist nicht nötig.

So überprüfst du die aktuell installierte npm-Version auf deinem PC

Nachdem du Node.js installiert hast, führe die folgenden Befehle aus, um die Versionen von Node.js und npm zu überprüfen:

node -v

Der nächste Befehl zeigt die aktuelle npm-Version an:

npm -v

npm Pakete

In diesem Abschnitt geht es darum, wie man npm-Pakete global und lokal installiert und deinstalliert, ein Paket aktualisiert, Pakete auflistet, den Speicherort eines Pakets ändert und nach installierten Paketen sucht.

Wir beginnen mit der Frage, was ein npm-Paket ist und sehen uns einige Beispiele für Pakete an, die von Entwicklern verwendet werden.

Was ist ein Npm-Paket?

Ein Paket ist einfach ein vorgefertigtes Projekt, das im npm-Verzeichnis veröffentlicht wird. Was ein Paket kann, hängt allein vom Ersteller und den Mitwirkenden des Pakets ab.

Mit npm können wir auf zahlreiche Projekte zugreifen, die von anderen Entwicklern erstellt wurden. Stell dir vor, du würdest dein eigenes CSS-Framework erstellen; das würde eine Menge Zeit in Anspruch nehmen. Also erstellen Entwickler diese Projekte und stellen sie in die npm-Registry ein, damit wir sie einfach nutzen können und der Entwicklungsprozess erleichtert wird.

Ein Beispiel für ein solches npm-Paket ist Tailwind CSS, ein CSS-Framework für die Erstellung von Webseiten. Andere beliebte npm-Pakete sind React, Chalk, Gulp, Bootstrap, Express und Vue.js, neben vielen anderen.

So installierst du ein npm-Paket global

Wenn du ein npm-Paket global installierst, kannst du von jedem Verzeichnis auf deinem Computer darauf zugreifen.

In diesem Abschnitt erfährst du, wie du ein Paket global installieren kannst, indem du einen npm-Befehl in deinem Terminal ausführst.

Um ein Paket global zu installieren, verwende diesen Befehl:

npm install -g [package name]

Beachte, dass das -g Flag im Befehl das npm CLI befähigt, das Paket global zu installieren.

Hier ist ein Beispiel:

npm install -g typescript

Mit dem obigen Befehl wird TypeScript global auf deinem Computer installiert. Nach der Installation kannst du TypeScript in jedem beliebigen Verzeichnis verwenden.

Wie man ein npm-Paket lokal installiert

Im vorherigen Abschnitt haben wir gesehen, wie man ein npm-Paket global installiert. Jetzt geht es darum, ein Paket lokal zu installieren.

Ein Paket lokal zu installieren bedeutet, dass du die Funktionen des Pakets nur im aktuellen Verzeichnis nutzen kannst. Dazu musst du in das Verzeichnis navigieren, in dem du das Paket installieren möchtest, und diesen Befehl im Terminal ausführen:

npm install [package name]

Hier ist ein Beispiel:

npm install typescript

Mit dem obigen Befehl wird TypeScript lokal installiert, d.h. es funktioniert nur in diesem aktuellen Verzeichnis.

So deinstallierst du ein npm-Paket global

Wenn wir ein npm-Paket nicht mehr brauchen, kannst du es von deinem Computer entfernen, indem du es deinstallierst.

Um ein Paket global zu deinstallieren, gehe wie folgt vor:

npm uninstall -g [package name]

Sehen wir uns ein Beispiel an:

npm uninstall -g typescript

Der Befehl im obigen Beispiel wird das TypeScript-Paket von deinem Computer entfernen.

Lokale Deinstallation eines npm-Pakets

Die Deinstallation eines lokal installierten npm-Pakets ähnelt dem vorherigen Beispiel, nur dass wir dieses Mal nicht das -g Flag verwenden.

Hier ist die Syntax:

npm uninstall [package name]

Und hier ist ein funktionierendes Beispiel:

npm uninstall typescript

Wie man npm und Pakete aktualisiert

Dein npm und deine Pakete auf dem neuesten Stand zu halten, ist der beste Weg, um Bugs und Sicherheitslücken von deinem Code fernzuhalten.

Um npm auf die neueste Version zu aktualisieren, benutze den folgenden Befehl:

npm install npm@latest - g

Dadurch wird npm global auf deinem Computer aktualisiert.

Wenn die Ersteller eines Pakets neue Funktionen einführen oder Fehler beheben, aktualisieren sie das Paket in der npm-Registrierung. Du musst dann dein eigenes Paket aktualisieren, um die neuen Funktionen nutzen zu können.

Hier ist die Syntax des Befehls, mit dem du das machst:

npm update [package name]

Und hier ist ein funktionierendes Beispiel:

npm update typescript

Der obige Befehl aktualisiert TypeScript auf seine neueste Version.

Außerdem können wir, genau wie in den vorherigen Abschnitten, das -g Flag verwenden, um ein Paket global zu aktualisieren. Das heißt:

npm update -g typescript

Wie man den Speicherort von npm-Paketen ändert

Bei manchen Nutzern, die keine administrativen Rechte auf ihrem Computer haben, kann das Ausführen von npm-Befehlen zu einer Fehlermeldung führen. Um dieses Problem zu beheben, kannst du den Standard-Installationsort deiner Pakete ändern, indem du einen neuen Ort/Verzeichnis festlegst.

Hier ist die Syntax für diese Änderung:

npm config set prefix [new directory path]

Sobald du den neuen Pfad für die Installation der Pakete festgelegt hast, werden alle deine npm-Pakete standardmäßig dort gespeichert.

Globale Auflistung der installierten npm-Pakete

Wenn du dich fragst, wie du herausfinden kannst, wie viele Pakete auf deinem Computer installiert sind, bietet npm einen Befehl, der sie auflistet.

Wenn du den folgenden Befehl eingibst, werden alle Pakete aufgelistet, die global auf deinem Gerät installiert sind:

npm list -g

Wenn der obige Befehl erfolgreich ausgeführt wurde, siehst du eine vollständige Liste aller Pakete, die du zuvor irgendwo auf deinem Computer installiert hast.

Im nächsten Abschnitt sehen wir uns an, wie du lokal installierte npm-Pakete auflisten kannst.

Lokal installierte npm-Pakete auflisten

Ähnlich wie im letzten Abschnitt können wir auch lokal installierte npm-Pakete auflisten.

Um eine Liste der lokal installierten Pakete zu erhalten, führe den folgenden Befehl in deinem Terminal aus:

npm list

Du musst den obigen Befehl im Verzeichnis deines Projekts ausführen, um alle Pakete zu sehen, die für das jeweilige Projekt installiert sind.

Wie man nach npm-Paketen sucht

Es gibt über 1,3 Millionen Pakete in der npm-Registry, alle mit unterschiedlichen Funktionen. Welches Paket das richtige ist, hängt von deinen Bedürfnissen und Zielen ab.

Es gibt Pakete, die du unbedingt verwenden musst, wenn du mit bestimmten Entwicklungsstacks arbeitest. Ein beliebtes Paket in React ist zum Beispiel React Router, das für das Routing in React verwendet wird.

Genauso benötigen andere Tech Stacks unterschiedliche Pakete.

Du kannst die Suchleiste auf der npm-Webseite benutzen, um nach Paketen zu suchen und zu sehen, was jedes einzelne tut. Zu den meisten Paketen gibt es eine Installationsanleitung und Details zu den Funktionen. Halte nach Paketen Ausschau, die regelmäßig gewartet werden, d.h. Pakete, die in regelmäßigen Abständen von Entwicklern in der Community getestet, korrigiert und verbessert werden.

Zusätzliche npm-Dateien und -Ordner

Jetzt, wo wir wissen, was npm-Pakete sind und wie sie verwendet werden, wollen wir uns einige der anderen Dateien und Ordner ansehen, die zu einem npm-basierten Projekt gehören.

Die Datei package.json

Die Datei package.json hilft uns, den Überblick über alle installierten Pakete in einem bestimmten Projekt zu behalten. Wenn du ein neues Projekt erstellst, ist es wichtig, dass du diese Datei zuerst anlegst.

Sie speichert Informationen über ein Projekt wie den Namen des Projekts, seine Version, Skripte, Abhängigkeiten und mehr.

Dazu kannst du den Befehl npm init oder npm init -y im Terminal des Projekts ausführen. Dann füllst du einfach alle Fragen aus, die das System beim Erstellen der Datei stellt.

Nach der Erstellung der Datei package.json werden alle installierten Pakete mit ihren Namen und Versionen in der Datei gespeichert.

Eine weitere wichtige Anwendung der package.json Datei ist das Klonen von Projekten auf GitHub. Wenn Entwickler ihr Projekt in ein Repository pushen, lassen sie den Ordner node_modules aus, der unsere Pakete und deren Abhängigkeiten enthält.

Um deinen eigenen Ordner zu erstellen, nachdem du ein Repository geklont hast, musst du den Befehl npm install im Terminal deines Projekts ausführen. Dadurch kann npm die package.json-Datei des Repositorys durchsuchen und alle dort aufgeführten Pakete installieren.

Nachdem die Installation abgeschlossen ist, kannst du alle Pakete nutzen, die zuvor für das Projekt installiert wurden, bevor es auf GitHub veröffentlicht wird.

Was sind npm-Abhängigkeiten?

Wenn wir Pakete installieren, wird ein Ordner node_modules erstellt, in dem wir andere Ordner sehen können – nämlich die Ordner der einzelnen Pakete und deren Unterordner. Du fragst dich vielleicht, warum diese anderen Ordner da sind, wenn du sie nicht installiert hast.

Nun, in deiner package.json Datei sind deine Pakete unter Abhängigkeiten aufgeführt, weil dein Projekt von diesen Paketen „abhängig“ ist, um seine Arbeit zu erledigen.

Die zusätzlichen Ordner, die in deinem node_modules Ordner erstellt werden, sind andere, zusätzliche Pakete, von denen deine installierten Pakete abhängen, um dir die besten Funktionen zu bieten. Du kannst das ganz einfach überprüfen, indem du dir die package.json-Datei eines installierten Pakets ansiehst, um seine Abhängigkeiten zu sehen.

Was sind npm-Skripte?

npm-Skripte sind benutzerdefinierte Skripte, die in der package.json-Datei definiert werden, um bestimmte Aufgaben zu automatisieren. Du kannst auch deine eigenen Skripte definieren, um verschiedene Aufgaben zu automatisieren, z. B. das Mining deines CSS-Codes, den Neustart deines Servers bei jeder Änderung, die Erstellung eines Projekts für die Produktion und so weiter.

Wenn wir eine package.json Datei erstellen, gibt es normalerweise ein test Skript, das zusammen mit der Datei erzeugt wird. Wir können Skripte für eine Vielzahl von Aufgaben verwenden, z. B. um einen Server zu starten, unseren CSS-Code zu minimieren, unseren Code für die Produktion zu bündeln und so weiter.

Ein beliebtes Beispiel für ein solches Skript ist das npm run start in React, das unseren Entwicklungsserver unter localhost:3000 startet.

Wie das obige Skript können wir auch andere Skripte mit dieser Befehlssyntax ausführen:

npm run [script-name]

Zusammenfassung

Im Laufe der Jahre ist npm zu einer Notwendigkeit bei der Entwicklung von Node.js-basierten Webanwendungen geworden. npm gibt uns Zugang zu Millionen von Projekten, die von anderen Entwicklern eingesetzt werden und die du kostenlos für dein eigenes Projekt nutzen kannst.

Es gibt eine Vielzahl von npm-Paketen, von CSS-Frameworks, Dateibündlern, JavaScript-Frameworks, Backend-Tools und vielem mehr. Diese Projekte sind auch für andere Entwickler sicher und viele werden regelmäßig gewartet und aktualisiert.
(cta)
Mit npm ist die Entwicklung von Webanwendungen einfacher geworden; wir müssen das Rad nicht mehr neu erfinden. Alles, was wir tun müssen, ist, das Paket eines anderen Entwicklers zu installieren und uns stundenlanges Programmieren zu ersparen.

Als Entwickler können wir auch unsere eigenen npm-Pakete erstellen und sie in der npm-Registry veröffentlichen, damit andere Entwickler sie nutzen können. Ähnlich wie die Nutzer der WordPress-Community zur Verbesserung und zum Erfolg der Plattform beitragen, können das auch die Mitglieder der Node.js-Community tun.

Hast du ein Tool entwickelt, das dir in der Entwicklungsphase hilft und das du gerne anderen Entwicklern zur Verfügung stellen würdest? Teile deine Gedanken im Kommentarbereich mit!