Was zum Teufel sind npm-Befehle?

npm ist, wie Sie jetzt wissen, ein Paketmanager. Aber wie ähnliche, frühere Werkzeuge, die Aufgaben in der Kommandozeile ausführen, wie Grunt und Gulp, kann npm auch Aufgaben ausführen – was perfekt für uns ist, denn jetzt, da wir das Sass-Paket im vorherigen Kapitel installiert haben, können wir es auch verwenden!

Kapitel des Leitfadens

Einstieg in npm-Befehle

Öffnen Sie die Datei package.json in Ihrem Testordner, und Sie werden im Moment nicht viel sehen; nur eine dependencies-Eigenschaft, bisher mit nur einer Abhängigkeit

{
  "dependencies": {
    "sass": "^1.43.4"
  }
}

Die Datei package.json ist jedoch die Heimat für viel mehr als nur Abhängigkeiten. Sie enthält auch viele Metainformationen *über* Ihr Projekt. Einer der interessantesten Teile ist eine optionale, aber äußerst nützliche Eigenschaft namens scripts.

Denken Sie daran, dass alle Unterabhängigkeiten von Sass in package-lock.json verfolgt werden, das automatisch generiert wird und nicht von Hand bearbeitet werden sollte. package.json enthält im Allgemeinen nur die Top-Level-Abhängigkeiten, und wir können es frei anpassen.

Das scripts-Objekt in Ihrer package.json-Datei ermöglicht es Ihnen, Befehle zu erstellen, die Sie in diesem Projekt ausführen können, um verschiedene Aufgaben für Sie zu erledigen, entweder einmalig oder als kontinuierlich laufender Prozess. Im Allgemeinen werden diese "Aufgaben" für Dinge wie das Starten eines Dev-Servers für die lokale Entwicklung, das Kompilieren von Assets und/oder das Ausführen von Tests verwendet. Tatsächlich gibt es oft einen einzigen Befehl start oder dev, der in Projekte integriert ist, um *alle* Aufgaben zu verwalten, die Sie möglicherweise gleichzeitig ausführen müssen, wie z. B. das Kompilieren von Sass und JavaScript in derselben Sequenz.

Wir haben noch keine Skripte zum Ausführen, aber das ändern wir!

Beispiel: Sass in CSS kompilieren

Innerhalb des scripts-Bereichs der Datei package.json haben wir Zugriff auf alle unsere installierten Pakete. Auch wenn wir derzeit keine sass-Befehle einfach im Terminal eingeben können, können wir sass-Befehle als Teil eines npm-Skripts ausführen.

Wir könnten sass-Befehle im Terminal ausführen, wenn Sass global installiert wäre, was systemweit bedeutet, anstatt in einem bestimmten Projektordner installiert zu sein. Bisher haben wir Sass nur in diesem Ordner installiert (das passiert standardmäßig, wenn Sie ein Paket installieren). Eine globale Installation würde jedoch sass-Befehle überall im System verfügbar machen.

Beginnen Sie damit, diesen Codeblock in Ihre package.json-Datei einzufügen, direkt nach der öffnenden {-Klammer

"scripts": {
  "sass:build": "sass style.scss style.css"
},

Die JSON-Syntax ist sehr streng. Versuchen Sie, den Inhalt der Datei mit einem JSON-Validator zu überprüfen, wenn Sie nicht weiterkommen.

Dies gibt uns Zugriff auf ein npm run sass:build-Skript, das Sass für uns in CSS kompiliert!

Der Name des Befehls ist unwichtig, solange es eine durchgehende Zeichenfolge ist. Erwähnenswert ist auch, dass der Doppelpunkt (:) hier keine besondere Funktion hat; er ist nur eine Konvention, da sowohl build als auch sass allein wahrscheinlich zu generisch wären.

Wenn Sie schon einmal mit Sass-Befehlen gearbeitet haben – oder wenn Sie vorausgeschaut haben – wissen Sie wahrscheinlich, dass wir auch eine Datei style.scss im Stammverzeichnis unseres Projektordners erstellen müssen. Lassen Sie uns das tun und einige beliebige Sass-Codes hineinwerfen.

Screenshot of the VS Code app with an open style.scss file. The file contains a Sass color variable and one selector that's nested three levels deep. — Die Datei `style.scss` liegt neben den JSON-Dateien und dem `node_modules`-Ordner auf der obersten Ebene des Projektordners.

Hier ist der Sass-Code, den ich verwendet habe, falls Sie ihn kopieren und einfügen möchten

$myColor: #ffd100;

.a {
  .nested {
    .selector {
      color: $myColor;
    }
  }
}

Großartig! Speichern Sie diese Datei als style.scss im Stammverzeichnis Ihres Projekts und lassen Sie uns versuchen, unseren neuen Befehl auszuführen

npm run sass:build

Nachdem diese Aufgabe abgeschlossen ist, sollten Sie zwei neue Dateien fast sofort in Ihrem Projektordner sehen: style.css und style.css.map.

Screenshot of the VS Code app with a style.scss file open and an open terminal below that with npm commands, including npm run sass:build. — Nachdem Sie `npm run sass:build` ausgeführt haben, sollten die Dateien style.css und style.css.map im Stammverzeichnis des Projektordners erscheinen.

Wenn Sie möchten, können Sie die Datei style.css – die den kompilierten CSS-Code enthält – öffnen, um zu überprüfen, ob es sich tatsächlich um das handelt, was wir erwarten

Screenshot of the VS Code app with a compiled style.css file open showing how the npm command to run Sass has processed the Sass code into normal CSS. An open terminal is below it showing the npm commands that were used. — Schauen Sie sich das an, pures CSS!

Das sass-Paket kompiliert sogar eine Source Map für uns, mit der wir sehen können, welche Stile aus welchen .scss-Dateien stammen, wenn wir sie in den DevTools eines Browsers inspizieren. Wie nett!

Wenn Sie einen Fehler erhalten: Überprüfen Sie die Syntax in package.json, um sicherzustellen, dass es sich um gültiges JSON handelt (hier ist ein online JSON-Validator, den Sie verwenden können), und dass Ihre .scss-Datei gültiges Sass enthält (hier ist ein online Sass-Konverter). Eine weitere Sache, die Sie überprüfen sollten, ist, ob der Dateiname mit dem Namen im Befehl übereinstimmt.

Erstellung eines reinen Entwicklungskonmandos

Das ist ziemlich cool, aber wir werden wahrscheinlich müde davon, diesen Befehl immer wieder auszuführen, während wir entwickeln. Also richten wir einen zweiten Befehl ein, der Sass anweist, die Datei für uns zu *beobachten* und sie jedes Mal automatisch neu zu kompilieren, wenn wir Änderungen speichern!

Fügen Sie dies innerhalb des scripts-Objekts in package.json hinzu

"sass:watch": "sass style.scss style.css --watch"

Wichtiger Hinweis: Stellen Sie sicher, dass sich ein Komma (,) zwischen den beiden Skripten befindet. Die Reihenfolge spielt keine Rolle, aber das Komma dazwischen schon. Auch hier ist JSON streng, also nutzen Sie den JSON-Validator bei Bedarf.

Wenn wir nun sass:watch ausführen (nicht zu verwechseln mit Sasquatch), sehen Sie eine Meldung in Ihrem Terminal: „Sass is watching for changes. Press Ctrl-C to stop.“

Wenn Sie jetzt Ihre Datei style.scss öffnen, eine Änderung vornehmen und sie speichern, sollten Sie automatisch eine Meldung im Terminal sehen, die bestätigt, dass Sass erneut in CSS kompiliert wurde

A screenshot of text from the terminal saying that Sass is watching for changes. Press control plus c to stop. Below that it says that the style.scss file has compiled into a style.css file.

Jetzt *ist* das nützlich! Nicht nur das, sondern sobald wir diese Dateien in unser Repository einchecken, haben wir die genauen Anweisungen, um Sass zu installieren und zum Laufen zu bringen, mit einem einfachen Befehl – und das gilt auch für alle anderen, die an diesem Projekt arbeiten!

Wir belassen die Dinge hier für dieses Testprojekt. Es war nützlich zu sehen, wie man anfängt, aber häufiger werden Sie auf ein vorkonfiguriertes Projekt zurückgreifen, anstatt npm-Befehle von Grund auf neu zu erstellen, was genau das ist, was wir als nächstes im letzten Kapitel dieses npm-Leitfadens tun werden.

Abschließende Hinweise zur Installation von npm-Paketen

Sie sollten wissen, dass es tatsächlich zwei Möglichkeiten gibt, npm-Pakete zu installieren, und welche Sie wählen, hängt davon ab, ob das Paket für den Produktions-Build bestimmt ist oder ob es rein für Entwicklungszwecke dient.

npm install (oder npm i) ist die Standardmethode (und die Standardeinstellung), um ein Paket zu einem Projekt hinzuzufügen.
npm install --save-dev (oder npm i -D) fügt das Paket nur zu Ihren „Dev-Abhängigkeiten“ hinzu, was bedeutet, dass sie nur bei der *Entwicklung* des Projekts installiert werden und nicht beim Erstellen der endgültigen Produktionsversion des Projekts.

Als Entwicklung Abhängigkeiten installierte Pakete können Testbibliotheken, Linter, Vorschau-Server und andere Werkzeuge umfassen, die Ihnen nur während des Entwicklungsprozesses helfen. Sie werden typischerweise nicht verwendet, um die Website selbst zu kompilieren oder auszuführen.

Es gibt noch ein letztes Flag, das es wert ist, darüber zu wissen: npm install --global (oder npm i -g). So installieren Sie ein Paket global, wie wir es vorhin bei der Installation von Sass kurz besprochen haben. Sie könnten dies verwenden, wenn Sie beispielsweise sass *überall* auf Ihrem Computer ausführen möchten. Andere gängige Anwendungsfälle für die globale Installation können CLI-Werkzeuge sein, die Sie überall verwenden möchten, oder sogar ein anderer Paketmanager, wie z. B. Yarn.

Was kommt als Nächstes

Wir nähern uns dem Ende unserer Reise! Es gibt noch eine letzte Sache, die Sie wissen sollten, und zwar, wie Sie npm verwenden, um alles Nötige für ein bestehendes Projekt schnell einzurichten. Nehmen wir also an, Sie übernehmen ein Projekt, das npm verwendet. Wo fangen Sie an? Wie stellen Sie sicher, dass Sie konsistent mit anderen zusammenarbeiten? Das ist der Schwerpunkt des letzten Abschnitts dieses npm-Leitfadens.

← Kapitel 7

Kapitel 9 →