Ein kompletter Leitfaden zu npm für absolute Anfänger

Ich erinnere mich lebhaft an eine Phase zu Beginn meiner Karriere als Programmierer, in der ich das Gefühl bekam, dass sich die Dinge von dem weg entwickelten, was ich kannte, hin zu einem komplexeren Set an Werkzeugen und Praktiken, verankert in der Kommandozeile und etwas namens npm.

Dies ist der erste Teil eines Leitfadens für Anfänger, in dem wir das weitläufige Thema Node Package Manager, kurz npm, behandeln. Wir nehmen diese drei kleinen Buchstaben – npm – oft als selbstverständlich hin, wenn wir sie in die Kommandozeile tippen, aber npm ist Teil eines viel größeren Ökosystems, das für jeden, der zum ersten Mal einsteigt, oft einschüchternd oder verwirrend sein kann. Dieser Leitfaden wird helfen, dieses Ökosystem zu entmystifizieren und Ihnen helfen, nicht nur zu verstehen, was npm ist und tut, sondern sich letztendlich auch bei der Arbeit damit wohlzufühlen.

Kapitel des Leitfadens

1. Für wen zum Teufel ist dieser Leitfaden gedacht? (Sie sind hier!)
2. Was zum Teufel bedeutet „npm“?
3. Was zum Teufel ist die Befehlszeile?
4. Was zum Teufel ist Node?
5. Was zum Teufel ist ein Paketmanager?
6. Wie zum Teufel installiert man npm?
7. Wie zum Teufel installiert man npm-Pakete?
8. Was zum Teufel sind npm-Befehle?
9. Wie zum Teufel installiert man ein bestehendes npm-Projekt?

Moderne „Back-of-the-Front-End“-Entwicklung – von der npm ein Teil ist – erscheint komplex, weil es ein einziger Name für viele miteinander verbundene Werkzeuge ist. Wenn man dann noch bedenkt, dass sich die Front-End-Welt viel schneller zu bewegen scheint, als sie es tatsächlich tut, was das Gefühl erzeugt, man würde abgehängt, wenn man nicht sofort auf das neueste Pferd setzt, kann das Ganze unzugänglich wirken.

Deshalb starten wir diesen Leitfaden – um die Technologie für Sie in Ihrer eigenen Arbeit zugänglicher zu machen.

Für wen zum Teufel ist dieser Leitfaden gedacht?

Auf meinem eigenen Lernweg als Entwickler las ich Leitfäden über Technologien, die mich begeisterten, und kam dann zu einem Teil, in dem es hieß: „Einfach npm install“ dies oder das, und ich stieß wieder einmal einen enttäuschten Seufzer aus und gab auf, was auch immer dieses cool aussehende Ding war. Oder an abenteuerlicheren Tagen kopierte ich vielleicht den Befehl, landete dann aber unweigerlich entweder bei einem anderen Schritt, den ich nicht verstand („Machen Sie einfach“, hieß es immer, „[irgendetwas, von dem ich keine Ahnung hatte]“), oder ich erhielt eine Fehlermeldung, die im Leitfaden nicht erklärt wurde und mich völlig ausbremste.

Was auch immer npm war – was auch immer diese Befehle bewirkten und wo man sie eintippen sollte – niemand hatte sich je die Zeit genommen, es mir zu erklären. Und je mehr ich Leitfäden las, die von Leuten geschrieben wurden, die dieses Wissen als selbstverständlich voraussetzten, desto isolierter fühlte ich mich.

Wenn Ihnen das bekannt vorkommt: Diese Serie ist für Sie..

Höchstwahrscheinlich gehören Sie zu der Gruppe, die in den letzten Jahren als „Front-of-the-Front-End“ beschrieben wurde. Wie ich kennen Sie sich wahrscheinlich gut mit HTML und CSS aus. Vielleicht beherrschen Sie auch etwas JavaScript, entweder „Vanilla“ JavaScript oder über jQuery. Beides ist völlig in Ordnung, sowohl für die Zwecke dieses Artikels als auch im Allgemeinen.

Vielleicht haben Sie sogar schon ein Framework wie React oder Vue ausprobiert, aber Sie haben meistens nur Dinge kopiert und eingefügt, um Ihr Projekt zum Laufen zu bringen, und wussten nicht genau, was dieser Code eigentlich tat.

• Dieser Beitrag ist für Sie, wenn Sie die „große Kluft“ (The Great Divide) zwischen den eher traditionellen und den „modernen“ Definitionen der Front-End-Entwicklung spüren – und wenn Sie befürchten, Ihrer Karriere zu schaden, wenn Sie diesen Graben nicht überbrücken.
• Dieser Beitrag ist für Sie, wenn Sie nicht wirklich sicher sind, was der ganze Wirbel um Terminals und Kommandozeilen soll, und Sie es viel lieber hätten, niemals eines anfassen zu müssen.
• Dieser Beitrag ist für Sie, wenn Sie sich fragen, warum andere Entwickler anscheinend so darauf brennen, alles so verdammt kompliziert zu machen, und was der Sinn des ganzen Kommandozeilen-Krams überhaupt ist, wenn man stattdessen einfach schlichtes, einfaches HTML, CSS und JavaScript schreiben könnte.
• Dieser Beitrag ist für Sie, wenn Sie sich ausgeschlossen fühlen. Wenn Sie spüren, dass es da eine Sache gibt, eine wirklich große Sache, die Ihnen noch nie jemand richtig erklärt hat, und Sie besorgt sind, dass Sie der Einzige sind, der es nicht versteht.

Wisse dies, mein Front-End-Entwicklerkollege: Sie sind nicht allein. Ganz und gar nicht. Sie sind genau dort, wo ich vor nicht allzu langer Zeit war, und die unsichere Erinnerung an diesen Ort ist mir noch frisch im Gedächtnis.

Lassen Sie mich versuchen, die Fragen zu beantworten, die Sie wahrscheinlich haben – dieselben, die ich hatte – und zwar so, wie ich es mir von jemandem gewünscht hätte, bevor ich überhaupt wusste, wie man sie stellt.

Was in diesem Leitfaden behandelt wird

Dieser Leitfaden ist eine Artikelserie. Das liegt nicht daran, dass dieser Stoff an sich extrem schwer zu verstehen wäre; es liegt daran, dass er viele Teile hat und jeder für sich eine Erklärung verdient. Dies ist ein weites Feld mit etlichen Kaninchenbauen, die es zu erkunden gilt. Wenn wir uns auf einen soliden Schritt nach dem anderen konzentrieren, können wir uns die Zeit nehmen, die Dinge klar und verständlich zu machen. Das Ziel ist nicht, alles abzudecken, aber ich möchte lieber gründlich als schnell sein.

Wir beginnen damit, über die aktuelle Lage zu sprechen; was npm ist, ein wenig darüber, wo es herkommt und wie wir hierher gekommen sind. Von dort aus werden wir behandeln, was Node selbst ist, gefolgt von dem, was Paketmanager im Allgemeinen sind, bevor wir tatsächlich mit npm arbeiten. Zum Abschluss werden wir Node und npm installieren (falls noch nicht geschehen), ein Projekt initialisieren, um eine Vorstellung davon zu bekommen, wie es funktioniert, und schließlich ein echtes npm-Projekt von GitHub mit all seinen Paketen und Befehlen installieren.

Manches (oder alles) davon mag im Moment sehr einschüchternd klingen, aber keine Sorge. Genau deshalb nehmen wir uns für diesen Leitfaden Zeit.

Was Sie wissen sollten, bevor wir beginnen

Ich werde mein Bestes tun, so wenig wie möglich über Sie vorauszusetzen, außer dass Sie ein Webentwickler sind, der generell weiß, wie man eine Website mit HTML und CSS erstellt. Sie müssen nicht viel über JavaScript wissen oder selbst etwas schreiben, um diesem Leitfaden zu folgen, aber es hilft definitiv, wenn Sie zumindest ein grundlegendes Verständnis davon haben, was JavaScript ist und wie es funktioniert.

JSON ist das einzige andere Thema, das vor dem Start hilfreich sein könnte. Wenn Sie mit JSON nicht vertraut sind, lohnt es sich vielleicht, einen Blick auf diesen Leitfaden zu JSON zu werfen oder ihn zumindest parat zu haben, wenn wir an diesen Punkt kommen.

Darüber hinaus werde ich eventuell auf spezifische Tools, Projekte und Frameworks wie Bootstrap, React, Vue und SvelteKit verweisen, aber ich setze nicht voraus, dass Sie damit praktische Erfahrung haben oder jemals zuvor npm oder die Kommandozeile benutzt haben.

Bereit loszulegen? Beginnen wir damit zu klären, was wir mit „npm“ meinen, wofür es steht und wie es in die moderne Webentwicklung passt.