Was zum Teufel bedeutet "npm" ?

Eines der Dinge, die diese neue, stark von Werkzeugen geprägte Ära der Frontend-Entwicklung anfangs so schwer verständlich erscheinen lassen, ist, dass Dinge, die wir oft unter einem einzigen Namen nennen, tendenziell aus mehreren verschiedenen zusammenhängenden Teilen bestehen. Dasselbe gilt für npm und das Ökosystem darum herum.

Denken Sie zum Beispiel daran, wie wir beiläufig von "dem Internet" sprechen, obwohl das Web selbst keine einzelne, einheitliche Sache ist, sondern eine Sammlung von Protokollen, DNS, Servern, Browsern, Netzwerken, Anfragen und Antworten sowie vielen anderen Dingen, die über Jahre der Iterationen zusammengefügt wurden. Übrigens ist selbst der Browser eine Maschine mit vielen Teilen.

Kapitel des Leitfadens

1. Für wen ist diese Anleitung?
2. Was zum Teufel bedeutet "npm" ? (Sie sind hier!)
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?

npm ist eine Sammlung von Technologien

Auf die gleiche Weise ist das, was wir allgemein als "npm" (ja, alles klein geschrieben) und insbesondere "Back-of-the-Front-End" bezeichnen, ein einzelner Name für eine Sammlung vieler verschiedener einzelner Technologien und Systeme; eine Art Rube-Goldberg-Maschine zur Generierung von Browser-freundlichem Code.

Ich habe bereits die Kommandozeile erwähnt; das ist ein großer Teil des Ökosystems, weil wir damit interagieren. Aber mehr dazu im nächsten Kapitel.

Und dann gibt es noch npm, das in die Kategorie "Paketverwaltungssoftware" fällt. Das werden wir auch behandeln. Tatsächlich werden Sie mich in diesem Leitfaden wahrscheinlich als Paketmanager auf npm verweisen sehen.

Und schließlich gibt es Node selbst, das so knifflig zu erklären ist, dass ich es oft paraphrasiere, indem ich Douglas Adams zitiere: Es ist eine Programmiersprache, die fast – aber nicht ganz – ganz anders als JavaScript ist.

npm verwaltet Projektwerkzeuge

Um die Sache weiter zu verkomplizieren: Viele Projekte, bei denen Sie `npm install` in die Kommandozeile eingeben, können mit vorinstallierten Werkzeugen geliefert werden, die Ihnen helfen, eine Vielzahl von Dingen in Ihrem Projekt zu tun, z. B. Ihren Code zu verarbeiten (z. B. Sass-Code in CSS umwandeln). Es gibt viele All-in-One-Projekte, die bereits vorkonfiguriert sind und darauf warten, von Ihnen installiert und genutzt zu werden (Create React App, Next, Nuxt und SvelteKit, um nur einige zu nennen). Das ist natürlich praktisch, wenn es gut gemacht ist, aber es bedeutet auch zusätzliche Komplexität – also müssen wir noch mehr Namen zu unserer Liste von "Back-of-the-Front-End"-Dingen hinzufügen.

Diese Liste enthält oft Werkzeuge wie Babel (zum Kompilieren von JavaScript), Sass (zum Kompilieren von CSS), webpack (zum Bündeln von Assets), Vite (für Entwicklungsserver und andere Werkzeuge), PostCSS (zum Umwandeln einer Syntax in eine andere); Autoprefixer (der ein PostCSS-Plugin für CSS-Herstellerpräfixe sein kann); TypeScript (für zusätzliche JavaScript-Syntax); ESlint (zur Überprüfung der Codequalität); Prettier (zur Formatierung von Code) und Testbibliotheken wie Jest oder Cypress.

All diese Dinge (und mehr) fallen in diese breite, allgemeine Kategorie von Werkzeugen, die oft mit npm-installierten Projekten geliefert werden – oder die über npm installiert und verwendet werden können – aber nicht tatsächlich Teil von npm selbst sind. Sie sind nur Beispiele für moderne Werkzeuge, die uns helfen, schöne Dinge mit unserem Code zu tun, und ich erwähne sie hier nur, weil es sich lohnt, den Unterschied zu beachten, um ein Gefühl dafür zu bekommen, wo die Grenzen in dieser großen, neuen Welt liegen.

Und übrigens, wenn Sie nicht wissen, was die meisten (oder irgendwelche) der oben genannten Werkzeuge sind, ist das in Ordnung. Vielleicht sind Sie ihnen noch nicht begegnet, oder vielleicht haben Sie an einem Projekt gearbeitet, bei dem sie installiert waren, ohne dass Sie sie namentlich kannten. In jedem Fall dient all dies nur als zusätzlicher Kontext.

Machen wir hier eine Pause

Wenn Sie sich an diesem Punkt bereits etwas überfordert fühlen: keine Sorge. Das Wichtigste, was Sie nach dem Lesen dieses speziellen Kapitels mitnehmen sollen, ist, dass das, was wir als "npm" (oder vielleicht etwas lockerer als "all das Kommandozeilen-Zeug, das so im Hintergrund abläuft") bezeichnen, eigentlich nicht eine Sache ist, sondern eine Sammlung von Dingen, die zusammenarbeiten, um die Entwicklung für uns zu erleichtern.

Und ja: Auch wenn all diese Komplexität anfangs einschüchternd wirkt, macht sie die Dinge tatsächlich besser. Ich verspreche es.

Obwohl das Frontend schnell zu sein scheint, nein, Sie sind nicht zurückgefallen. Sie müssen vielleicht nur ein wenig nachholen.