Was zum Teufel haben NPM -Befehle?

Als Paketmanager kann NPM auch Aufgaben ausführen, die den früheren Befehlszeilenaufgaben ähneln, die Tools wie Grunzen und Gulp ausführen. Nachdem wir das SASS -Paket im vorherigen Kapitel installiert haben, können wir es verwenden!

Leitfaden Kapitel

1. Für wen ist dieser Leitfaden?
2. Was genau bedeutet "NPM"?
3. Was ist die Befehlszeile?
4. Was ist Knoten?
5. Was ist ein Paketmanager?
6. Wie installiere ich NPM?
7. Wie installiere ich das NPM -Paket?
8. Was ist der Befehl npm? (Ihr aktueller Standort!)
9. Wie installiere ich ein vorhandenes NPM -Projekt?

Eingehender Befehl NPM

Öffnen Sie die Datei package.json im Testordner, Sie werden derzeit nicht viel Inhalt sehen dependencies

 <code>{ "dependencies": { "sass": "^1.43.4" } }</code>

Die Datei package.json enthält jedoch viel mehr als Abhängigkeiten. Es enthält auch eine Menge Meta-Information über das Projekt. Der interessanteste Teil davon ist eine optionale, aber sehr nützliche Eigenschaft namens scripts .

Denken Sie daran, dass alle Unterabhängigkeiten von SASS in der automatisch generierten package-lock.json aufgezeichnet werden und nicht manuell bearbeitet werden sollten. package.json enthält normalerweise nur Abhängigkeiten auf höchster Ebene, und wir können sie frei anpassen.

scripts Skriptobjekt in der Datei package.json können Sie Befehle erstellen, die im Projekt ausgeführt werden können, um verschiedene Aufgaben zu erledigen, unabhängig davon, ob es sich um einen einzelnen Lauf oder ein kontinuierlicher Laufprozess handelt. In der Regel werden diese "Aufgaben" verwendet, um lokal entwickelte Entwicklungsserver zu starten, Ressourcen zu erstellen und/oder Tests auszuführen. Tatsächlich wird häufig ein start oder dev in ein Projekt integriert, um alle Aufgaben zu erledigen, die Sie möglicherweise gleichzeitig ausführen müssen, z. B. das Zusammenstellen von Sass und JavaScript in der Reihenfolge.

Wir haben noch keine Skripte auszuführen, aber lassen Sie uns dies beheben!

Beispiel: Sass in CSS kompilieren

Im Abschnitt scripts der Datei package.json können wir auf alle installierten Pakete zugreifen. Auch wenn wir den Befehl sass momentan nicht direkt in das Terminal eingeben können, können wir den SASS -Befehl als Teil des NPM -Skripts ausführen.

Wenn SASS weltweit installiert ist (was eine systemweite Installation, nicht in einem bestimmten Projektordner), können wir den SASS-Befehl im Terminal ausführen. Bisher haben wir nur SASS in diesem Ordner installiert (dies ist das Standardverhalten bei der Installation von Paketen). Die globale Installation wird jedoch den SASS -Befehl überall auf dem System verfügbar machen.

Fügen Sie diesen Code -Block zunächst unmittelbar nach Beginn in Ihre package.json { ein.

 <code>"scripts": { "sass:build": "sass style.scss style.css" },</code>

Die JSON -Syntax ist sehr streng. Wenn Sie Probleme haben, führen Sie den Inhalt der Datei mit dem JSON -Validator aus.

Dies gibt uns Zugriff auf <code>npm run sass:build</code> -Skript, das SASS für uns zu CSS kompiliert wird!

Der Name des Befehls spielt keine Rolle, solange es sich um eine kontinuierliche Zeichenfolge handelt. Es ist auch erwähnenswert build dass der Dickdarm sass :) hier keine besonderen Auswirkungen hat.

Wenn Sie den SASS -Befehl bereits verwendet haben (oder im Voraus gesucht haben), wissen Sie möglicherweise, dass dies bedeutet, dass wir auch eine style.scss -Datei im Stamm des Projektordners erstellen müssen. Lassen Sie uns dies tun und einen willkürlichen Sass -Code hineingeben.

Wenn Sie kopieren und einfügen möchten, hier ist der Sass -Code, den ich verwende:

 <code>$myColor: #ffd100; .a { .nested { .selector { color: $myColor; } } }</code>

wunderbar! Speichern Sie die Datei als style.scss im Project Root -Verzeichnis und versuchen Sie dann, den neuen Befehl auszuführen:

 <code>npm run sass:build</code>

Sobald diese Aufgabe abgeschlossen ist, sollten Sie sofort zwei neue Dateien im Projektordner sehen: style.css und style.css.map .

Wenn Sie es vorziehen, können Sie die Datei style.css (mit kompiliertem CSS -Code enthält) öffnen, um zu überprüfen, ob wir in der Tat das sind, was wir erwarten:

Das SASS -Paket erstellt sogar eine Quellkarte für uns, auf der wir sehen können, welche Stile ausgestattet sind .scss Eindrucksvoll!

Wenn Sie auf einen Fehler stoßen: Überprüfen Sie die Syntax in package.json , um sicherzustellen, dass es sich um einen gültigen JSON handelt (Sie können den Online -JSON -Validator hier verwenden), und Ihre .scss -Datei enthält einen gültigen SASS (der ein Online -Sass -Konverter ist). Eine weitere zu überprüfen, ob der Dateiname mit dem Dateinamen im Befehl übereinstimmt.

Befehle nur für Entwicklungen erstellen

Das ist schön, aber wenn wir uns entwickeln, können wir es satt haben, den Befehl immer wieder auszuführen. Lassen Sie uns also einen zweiten Befehl einrichten, der SASS auffordert, die Datei für uns zu überwachen und automatisch neu zu kompilieren, wenn wir die Änderungen speichern!

Fügen Sie Folgendes in das scripts in package.json hinzu:

 <code>"sass:watch": "sass style.scss style.css --watch"</code>

Wichtiger Hinweis: Stellen Sie sicher, dass zwischen den beiden Skripten ein Komma (,) besteht. Die Bestellung spielt keine Rolle, aber das Komma zwischen ihnen ist wichtig. Wieder ist JSON sehr streng, also verlassen Sie sich bei Bedarf auf den JSON -Validator.

Wenn wir nun sass:watch (nicht mit Sasquatch verwechselt werden) ausführen, sehen Sie eine Nachricht im Terminal mit der Aufschrift "SASS überwacht Änderungen. Drücken Sie Strg-C, um zu stoppen".

Wenn Sie jetzt die Datei style.scss -Datei öffnen, Änderungen vornehmen und speichern, sollten Sie eine Meldung im Terminal automatisch angezeigt, in dem bestätigt wird, dass SASS in CSS neu kompiliert wurde:

Das ist nützlich! Sobald wir diese Dateien an unser Repository übermittelt haben, haben wir die genauen Anweisungen zum Installieren und Ausführen von SASS und verwenden einen einfachen Befehl - ebenso wie alle anderen, die an diesem Projekt beteiligt sind!

Wir werden dieses Testprojekt beenden. Es ist nützlich zu sehen, wie man loslegt, aber die meiste Zeit werden Sie ein vorkonfiguriertes Projekt verwenden, anstatt den Befehl npm von Grund auf neu zu erstellen. Genau das werden wir im letzten Kapitel dieses NPM -Handbuchs tun.

Endgültige Anweisungen zur Installation des NPM -Pakets

Sie sollten wissen, dass es tatsächlich zwei Möglichkeiten gibt, das NPM -Paket zu installieren, welches Sie möchten, hängt davon ab, ob das Paket Teil des Produktionsbaues sein sollte oder ob es sich um rein Entwicklungszwecke handelt.

• npm install (oder npm i ) ist die Standard- (und Standard-) Methode zum Hinzufügen von Paketen zu Projekten.
• npm install --save-dev (oder npm i -D ) fügt Ihren "Entwicklungsabhängigkeiten" nur Pakete hinzu, was bedeutet, dass sie nur dann installiert sind, wenn das Projekt entwickelt wird und nicht, wenn die endgültige Produktionsversion des Projekts erstellt wird.

Pakete, die als Entwicklungsabhängigkeiten installiert sind, können Testbibliotheken, Codeüberprüfungs -Tools, Vorschauserver und andere Tools umfassen, die Ihnen nur während der Entwicklung helfen. Sie werden normalerweise nicht verwendet, um die Website selbst zu kompilieren oder auszuführen.

Es gibt auch ein endgültiges Flag, das es wert ist, zu wissen: npm install --global (oder npm i -g ). So installieren Sie das Paket weltweit, wie wir bei der früheren Installation von SASS besprochen haben. Wenn Sie beispielsweise sass überall auf der Maschine ausführen möchten, können Sie diese Methode verwenden. Andere globale Anwendungsfälle für globale Installationen können das CLI -Tool enthalten, das Sie überall verwenden möchten, oder sogar einen anderen Paketmanager wie Garn.

Nächste Schritte

Wir sind kurz davor, unsere Reise zu beenden! Eine weitere Sache, die Sie wissen sollten, und alles, was Sie benötigen, um ein vorhandenes Projekt mit NPM schnell zu starten. Nehmen wir also an, Sie erben ein Projekt mit NPM. Wo hast du angefangen? Wie stellen Sie sicher, dass Sie weiter mit anderen arbeiten? Dies ist der Schwerpunkt des letzten Abschnitts dieses NPM -Handbuchs.

← Kapitel 7 Kapitel 9 →

Das obige ist der detaillierte Inhalt vonWas zum Teufel haben NPM -Befehle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!