\n
\nIn diesem Tutorial sprechen wir \u00fcber npm (Node package manager), ein JavaScript-Online-Repository<\/a> f\u00fcr 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.<\/p>\n
Au\u00dferdem lernen wir die Befehlszeilenschnittstelle (CLI) kennen und erfahren etwas \u00fcber Abh\u00e4ngigkeiten, Skripte und die Datei package.json<\/strong>. Auch wenn du verschiedene Varianten der Bedeutung von npm siehst, steht das Akronym f\u00fcr „Node Package Manager“<\/p>\n npm ist ein Paketmanager f\u00fcr Node.js-Projekte<\/a>, der f\u00fcr die \u00f6ffentliche Nutzung zur Verf\u00fcgung steht. Projekte, die in der npm-Registry verf\u00fcgbar sind, werden „Pakete“ genannt<\/p>\n npm erm\u00f6glicht es uns, Code, der von anderen geschrieben wurde, einfach zu nutzen, ohne dass wir ihn w\u00e4hrend der Entwicklung selbst schreiben m\u00fcssen.<\/p>\n In der npm-Registry gibt es \u00fcber 1,3 Millionen Pakete, die von mehr als 11 Millionen Entwicklern auf der ganzen Welt genutzt werden. (Wir werden sp\u00e4ter in diesem Leitfaden mehr \u00fcber Pakete sprechen)<\/p>\n Hier sind einige der Gr\u00fcnde, warum du npm verwenden solltest:<\/p>\n Als N\u00e4chstes sprechen wir \u00fcber die npm-Befehlszeilenschnittstelle.<\/p>\n Die Befehlszeilenschnittstelle von npm wird verwendet, um verschiedene Befehle auszuf\u00fchren, wie z. B. Pakete zu installieren und zu deinstallieren, die npm-Version zu \u00fcberpr\u00fcfen, Paketskripte auszuf\u00fchren, die package.json-Datei<\/strong> zu erstellen und vieles mehr.<\/p>\n Im weiteren Verlauf dieses Leitfaden werden wir einige Anwendungsf\u00e4lle der Kommandozeilenschnittstelle kennenlernen.<\/p>\n Auf einem Windows-Computer nennen wir die Befehlszeilenschnittstelle normalerweise Eingabeaufforderung. Auf einem Mac-Computer wird sie Terminal<\/a> genannt.<\/p>\n In diesem Abschnitt gehen wir auf einige der am h\u00e4ufigsten verwendeten npm-Befehle ein und erkl\u00e4ren, was sie bewirken.<\/p>\n Mit diesem Befehl kannst du Pakete installieren. Du kannst Pakete entweder global oder lokal installieren. Wenn ein Paket global installiert wird, k\u00f6nnen wir die Funktionen des Pakets von jedem beliebigen Verzeichnis auf unserem Computer aus nutzen.<\/p>\n Wenn wir ein Paket hingegen lokal installieren, k\u00f6nnen 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.<\/p>\n Mit diesem Befehl kannst du ein Paket deinstallieren.<\/p>\n Der Befehl Wenn du Wenn du die Informationen nicht selbst eingeben willst, kannst du einfach den Befehl Mit diesem Befehl aktualisierst du ein npm-Paket auf seine neueste Version.<\/p>\n Wird verwendet, um ein Paket neu zu starten. Du kannst diesen Befehl verwenden, wenn du ein bestimmtes Projekt stoppen und neu starten m\u00f6chtest.<\/p>\n Wird verwendet, um ein Paket bei Bedarf zu starten.<\/p>\n Stoppt die Ausf\u00fchrung eines Pakets.<\/p>\n Zeigt dir die aktuelle npm-Version an, die auf deinem Computer installiert ist.<\/p>\n Verwendet, um ein npm-Paket in der npm-Registry zu ver\u00f6ffentlichen. Diese Funktion wird meistens verwendet, wenn du dein eigenes Paket erstellt hast.<\/p>\n Um npm zu installieren, musst du zun\u00e4chst Node.js auf deinem Computer installieren<\/a>. Gehe dazu auf die Node.js-Webseite<\/a> und lade es herunter. Wir empfehlen, die LTS-Version herunterzuladen, da dies die stabilste Version von Node.js ist.<\/p>\n Mit der Installation von Node.js wird automatisch auch npm installiert – eine separate Installation ist nicht n\u00f6tig.<\/p>\n Nachdem du Node.js installiert hast, f\u00fchre die folgenden Befehle aus, um die Versionen von Node.js und npm zu \u00fcberpr\u00fcfen:<\/p>\n Der n\u00e4chste Befehl zeigt die aktuelle npm-Version an:<\/p>\n 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 \u00e4ndert und nach installierten Paketen sucht.<\/p>\n Wir beginnen mit der Frage, was ein npm-Paket ist und sehen uns einige Beispiele f\u00fcr Pakete an, die von Entwicklern verwendet werden.<\/p>\n Ein Paket ist einfach ein vorgefertigtes Projekt, das im npm-Verzeichnis ver\u00f6ffentlicht wird. Was ein Paket kann, h\u00e4ngt allein vom Ersteller und den Mitwirkenden des Pakets ab.<\/p>\n Mit npm k\u00f6nnen wir auf zahlreiche Projekte zugreifen, die von anderen Entwicklern erstellt wurden. Stell dir vor, du w\u00fcrdest dein eigenes CSS-Framework erstellen; das w\u00fcrde 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\u00f6nnen und der Entwicklungsprozess erleichtert wird.<\/p>\n Ein Beispiel f\u00fcr ein solches npm-Paket ist Tailwind CSS<\/a>, ein CSS-Framework f\u00fcr die Erstellung von Webseiten. Andere beliebte npm-Pakete sind React, Chalk, Gulp, Bootstrap, Express und Vue.js<\/a>, neben vielen anderen.<\/p>\n Wenn du ein npm-Paket global installierst, kannst du von jedem Verzeichnis auf deinem Computer darauf zugreifen.<\/p>\n In diesem Abschnitt erf\u00e4hrst du, wie du ein Paket global installieren kannst, indem du einen npm-Befehl in deinem Terminal ausf\u00fchrst.<\/p>\n Um ein Paket global zu installieren, verwende diesen Befehl:<\/p>\n Beachte, dass das Hier ist ein Beispiel:<\/p>\n Mit dem obigen Befehl wird TypeScript global auf deinem Computer installiert. Nach der Installation kannst du TypeScript in jedem beliebigen Verzeichnis verwenden.<\/p>\n Im vorherigen Abschnitt haben wir gesehen, wie man ein npm-Paket global installiert. Jetzt geht es darum, ein Paket lokal zu installieren.<\/p>\n 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\u00f6chtest, und diesen Befehl im Terminal ausf\u00fchren:<\/p>\n Hier ist ein Beispiel:<\/p>\n Mit dem obigen Befehl wird TypeScript lokal installiert, d.h. es funktioniert nur in diesem aktuellen Verzeichnis.<\/p>\n Wenn wir ein npm-Paket nicht mehr brauchen, kannst du es von deinem Computer entfernen, indem du es deinstallierst.<\/p>\n Um ein Paket global zu deinstallieren, gehe wie folgt vor:<\/p>\n Sehen wir uns ein Beispiel an:<\/p>\n Der Befehl im obigen Beispiel wird das TypeScript-Paket von deinem Computer entfernen.<\/p>\n Die Deinstallation eines lokal installierten npm-Pakets \u00e4hnelt dem vorherigen Beispiel, nur dass wir dieses Mal nicht das Hier ist die Syntax:<\/p>\n Und hier ist ein funktionierendes Beispiel:<\/p>\n Dein npm und deine Pakete auf dem neuesten Stand zu halten, ist der beste Weg, um Bugs und Sicherheitsl\u00fccken<\/a> von deinem Code fernzuhalten.<\/p>\n Um npm auf die neueste Version zu aktualisieren, benutze den folgenden Befehl:<\/p>\n Dadurch wird npm global auf deinem Computer aktualisiert.<\/p>\n Wenn die Ersteller eines Pakets neue Funktionen einf\u00fchren 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\u00f6nnen.<\/p>\n Hier ist die Syntax des Befehls, mit dem du das machst:<\/p>\n Und hier ist ein funktionierendes Beispiel:<\/p>\n Der obige Befehl aktualisiert TypeScript auf seine neueste Version.<\/p>\n Au\u00dferdem k\u00f6nnen wir, genau wie in den vorherigen Abschnitten, das Bei manchen Nutzern, die keine administrativen Rechte auf ihrem Computer haben, kann das Ausf\u00fchren von npm-Befehlen zu einer Fehlermeldung f\u00fchren. Um dieses Problem zu beheben, kannst du den Standard-Installationsort deiner Pakete \u00e4ndern, indem du einen neuen Ort\/Verzeichnis festlegst.<\/p>\n Hier ist die Syntax f\u00fcr diese \u00c4nderung:<\/p>\n Sobald du den neuen Pfad f\u00fcr die Installation der Pakete festgelegt hast, werden alle deine npm-Pakete standardm\u00e4\u00dfig dort gespeichert.<\/p>\n Wenn du dich fragst, wie du herausfinden kannst, wie viele Pakete auf deinem Computer installiert sind, bietet npm einen Befehl, der sie auflistet.<\/p>\n Wenn du den folgenden Befehl eingibst, werden alle Pakete aufgelistet, die global auf deinem Ger\u00e4t installiert sind:<\/p>\n Wenn der obige Befehl erfolgreich ausgef\u00fchrt wurde, siehst du eine vollst\u00e4ndige Liste aller Pakete, die du zuvor irgendwo auf deinem Computer installiert hast.<\/p>\n Im n\u00e4chsten Abschnitt sehen wir uns an, wie du lokal installierte npm-Pakete auflisten kannst.<\/p>\n \u00c4hnlich wie im letzten Abschnitt k\u00f6nnen wir auch lokal installierte npm-Pakete auflisten.<\/p>\n Um eine Liste der lokal installierten Pakete zu erhalten, f\u00fchre den folgenden Befehl in deinem Terminal aus:<\/p>\n Du musst den obigen Befehl im Verzeichnis deines Projekts ausf\u00fchren, um alle Pakete zu sehen, die f\u00fcr das jeweilige Projekt installiert sind.<\/p>\n Es gibt \u00fcber 1,3 Millionen Pakete in der npm-Registry, alle mit unterschiedlichen Funktionen. Welches Paket das richtige ist, h\u00e4ngt von deinen Bed\u00fcrfnissen und Zielen ab.<\/p>\n 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\u00fcr das Routing in React verwendet wird.<\/p>\n Genauso ben\u00f6tigen andere Tech Stacks unterschiedliche Pakete.<\/p>\n Du kannst die Suchleiste auf der npm-Webseite<\/a> 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\u00e4\u00dfig gewartet werden, d.h. Pakete, die in regelm\u00e4\u00dfigen Abst\u00e4nden von Entwicklern in der Community getestet, korrigiert und verbessert werden.<\/p>\n 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\u00f6ren.<\/p>\n Die Datei package.json<\/strong> hilft uns, den \u00dcberblick \u00fcber alle installierten Pakete in einem bestimmten Projekt zu behalten. Wenn du ein neues Projekt erstellst, ist es wichtig, dass du diese Datei zuerst anlegst.<\/p>\n Sie speichert Informationen \u00fcber ein Projekt wie den Namen des Projekts, seine Version, Skripte, Abh\u00e4ngigkeiten und mehr.<\/p>\n Dazu kannst du den Befehl Nach der Erstellung der Datei package.json<\/strong> werden alle installierten Pakete mit ihren Namen und Versionen in der Datei gespeichert.<\/p>\n Eine weitere wichtige Anwendung der package.json<\/strong> Datei ist das Klonen von Projekten auf GitHub<\/a>. Wenn Entwickler ihr Projekt in ein Repository pushen<\/a>, lassen sie den Ordner Um deinen eigenen Ordner zu erstellen, nachdem du ein Repository geklont hast, musst du den Befehl Nachdem die Installation abgeschlossen ist, kannst du alle Pakete nutzen, die zuvor f\u00fcr das Projekt installiert wurden, bevor es auf GitHub ver\u00f6ffentlicht wird.<\/p>\n Wenn wir Pakete installieren, wird ein Ordner Nun, in deiner package.json<\/strong> Datei sind deine Pakete unter Abh\u00e4ngigkeiten aufgef\u00fchrt, weil dein Projekt von diesen Paketen „abh\u00e4ngig“ ist, um seine Arbeit zu erledigen.<\/p>\n Die zus\u00e4tzlichen Ordner, die in deinem npm-Skripte sind benutzerdefinierte Skripte, die in der package.json-Datei<\/strong> 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<\/a>, den Neustart deines Servers bei jeder \u00c4nderung, die Erstellung eines Projekts f\u00fcr die Produktion und so weiter.<\/p>\n Wenn wir eine package.json<\/strong> Datei erstellen, gibt es normalerweise ein Ein beliebtes Beispiel f\u00fcr ein solches Skript ist das Wie das obige Skript k\u00f6nnen wir auch andere Skripte mit dieser Befehlssyntax ausf\u00fchren:<\/p>\n Im Laufe der Jahre ist npm zu einer Notwendigkeit bei der Entwicklung von Node.js-basierten Webanwendungen<\/a> geworden. npm gibt uns Zugang zu Millionen von Projekten, die von anderen Entwicklern eingesetzt werden und die du kostenlos f\u00fcr dein eigenes Projekt nutzen kannst.<\/p>\n Es gibt eine Vielzahl von npm-Paketen, von CSS-Frameworks, Dateib\u00fcndlern, JavaScript-Frameworks<\/a>, Backend-Tools und vielem mehr. Diese Projekte sind auch f\u00fcr andere Entwickler sicher und viele werden regelm\u00e4\u00dfig gewartet und aktualisiert.
\nWas ist npm (Node Package Manager)?<\/h2>\n
![\"Screenshot](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/06\/npm-homepage.png\")
<\/a>Warum npm benutzen?<\/h2>\n
\n
Die npm-Befehlszeilenschnittstelle (CLI)<\/h2>\n
Wichtige npm-Befehle und Aliase<\/h2>\n
npm install<\/h3>\n
npm uninstall<\/h3>\n
npm init<\/h3>\n
init<\/code> wird verwendet, um ein Projekt zu initialisieren. Wenn du diesen Befehl ausf\u00fchrst, wird eine package.json-Datei<\/strong> erstellt.<\/p>\nnpm init<\/code> aufrufst, wirst du aufgefordert, bestimmte Informationen \u00fcber das Projekt anzugeben, das du initialisierst. Dazu geh\u00f6ren der Name des Projekts, der Lizenztyp, die Version und so weiter.<\/p>\nnpm init -y<\/code> ausf\u00fchren.<\/p>\nnpm update<\/h3>\n
npm restart<\/h3>\n
npm start<\/h3>\n
npm stop<\/h3>\n
npm version<\/h3>\n
npm publish<\/h3>\n
So installierst du npm<\/h2>\n
So \u00fcberpr\u00fcfst du die aktuell installierte npm-Version auf deinem PC<\/h3>\n
node -v<\/code><\/pre>\nnpm -v<\/code><\/pre>\nnpm Pakete<\/h2>\n
Was ist ein Npm-Paket?<\/h3>\n
So installierst du ein npm-Paket global<\/h3>\n
npm install -g [package name]<\/code><\/pre>\n-g<\/code> Flag im Befehl das npm CLI bef\u00e4higt, das Paket global zu installieren.<\/p>\nnpm install -g typescript<\/code><\/pre>\nWie man ein npm-Paket lokal installiert<\/h3>\n
npm install [package name]<\/code><\/pre>\nnpm install typescript<\/code><\/pre>\nSo deinstallierst du ein npm-Paket global<\/h3>\n
npm uninstall -g [package name]<\/code><\/pre>\nnpm uninstall -g typescript<\/code><\/pre>\nLokale Deinstallation eines npm-Pakets<\/h3>\n
-g<\/code> Flag verwenden.<\/p>\nnpm uninstall [package name]<\/code><\/pre>\nnpm uninstall typescript<\/code><\/pre>\nWie man npm und Pakete aktualisiert<\/h3>\n
npm install npm@latest - g<\/code><\/pre>\nnpm update [package name]<\/code><\/pre>\nnpm update typescript<\/code><\/pre>\n-g<\/code> Flag verwenden, um ein Paket global zu aktualisieren. Das hei\u00dft:<\/p>\nnpm update -g typescript<\/code><\/pre>\nWie man den Speicherort von npm-Paketen \u00e4ndert<\/h3>\n
npm config set prefix [new directory path]<\/code><\/pre>\nGlobale Auflistung der installierten npm-Pakete<\/h3>\n
npm list -g<\/code><\/pre>\nLokal installierte npm-Pakete auflisten<\/h3>\n
npm list<\/code><\/pre>\nWie man nach npm-Paketen sucht<\/h3>\n
Zus\u00e4tzliche npm-Dateien und -Ordner<\/h2>\n
Die Datei package.json<\/strong><\/h3>\n
npm init<\/code> oder npm init -y<\/code> im Terminal des Projekts ausf\u00fchren. Dann f\u00fcllst du einfach alle Fragen aus, die das System beim Erstellen der Datei stellt.<\/p>\nnode_modules<\/code> aus, der unsere Pakete und deren Abh\u00e4ngigkeiten enth\u00e4lt.<\/p>\nnpm install<\/code> im Terminal deines Projekts ausf\u00fchren. Dadurch kann npm die package.json-Datei<\/strong> des Repositorys durchsuchen und alle dort aufgef\u00fchrten Pakete installieren.<\/p>\nWas sind npm-Abh\u00e4ngigkeiten?<\/h3>\n
node_modules<\/code> erstellt, in dem wir andere Ordner sehen k\u00f6nnen – n\u00e4mlich die Ordner der einzelnen Pakete und deren Unterordner. Du fragst dich vielleicht, warum diese anderen Ordner da sind, wenn du sie nicht installiert hast.<\/p>\nnode_modules<\/code> Ordner erstellt werden, sind andere, zus\u00e4tzliche Pakete, von denen deine installierten Pakete abh\u00e4ngen, um dir die besten Funktionen zu bieten. Du kannst das ganz einfach \u00fcberpr\u00fcfen, indem du dir die package.json-Datei<\/strong> eines installierten Pakets ansiehst, um seine Abh\u00e4ngigkeiten zu sehen.<\/p>\nWas sind npm-Skripte?<\/h3>\n
test<\/code> Skript, das zusammen mit der Datei erzeugt wird. Wir k\u00f6nnen Skripte f\u00fcr eine Vielzahl von Aufgaben verwenden, z. B. um einen Server zu starten, unseren CSS-Code zu minimieren, unseren Code f\u00fcr die Produktion zu b\u00fcndeln und so weiter.<\/p>\nnpm run start<\/code> in React, das unseren Entwicklungsserver unter localhost:3000<\/code> startet.<\/p>\nnpm run [script-name]<\/code><\/pre>\n\nZusammenfassung<\/h2>\n
\n(cta)
\nMit npm ist die Entwicklung von Webanwendungen einfacher geworden; wir m\u00fcssen das Rad nicht mehr neu erfinden. Alles, was wir tun m\u00fcssen, ist, das Paket eines anderen Entwicklers zu installieren und uns stundenlanges Programmieren zu ersparen.<\/p>\n