Heim > Web-Frontend > js-Tutorial > Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

青灯夜游
Freigeben: 2022-10-08 17:58:05
nach vorne
1556 Leute haben es durchsucht

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Jedes Front-End-Projekt verfügt über NPM-Skripte. Wir werden NPM-Skripte verwenden, um Kompilierung, Verpackung, Flusen und andere Aufgaben zu organisieren. [Verwandte Tutorial-Empfehlungen: nodejs-Video-Tutorial]

Sie führen möglicherweise häufig NPM-Skripte aus, wissen aber nicht, wie diese Befehlszeilentools implementiert werden.

Was sollten Sie also tun, wenn Sie die Implementierungsprinzipien dieser Tools verstehen möchten?

Das ist das heutige Thema: Debuggen von NPM-Skripten.

In der package.json dieser Befehlszeilentools gibt es ein bin-Feld, um anzugeben, welche Befehle verfügbar sind:

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Nachdem npm dieses Paket installiert hat, wird es im Verzeichnis node_modules/.bin abgelegt:

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Auf diese Weise können wir verschiedene Tools über den Knoten ./node_modules/.bin/xx ausführen.

Wir können auch npx zum Ausführen verwenden, z. B. npx xx. Seine Funktion besteht darin, den lokalen Befehl unter node_modules/.bin auszuführen. Wenn nicht, wird er von npm heruntergeladen und dann ausgeführt.

Am häufigsten wird es natürlich in npm-Skripte eingefügt:

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Auf diese Weise führen Sie einfach npm run xxx direkt aus.

npm-Skripte verwenden im Wesentlichen Node, um diese Skriptcodes auszuführen, sodass sich das Debuggen dieser Skriptcodes nicht vom Debuggen anderer Knotencodes unterscheidet.

Das heißt, Sie können es wie folgt ausführen:

Wählen Sie in der Debugging-Datei von .vscode/launch.json das Startprogramm von node aus:

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Verwenden Sie node, um die Datei unter node_modules/.bin und auszuführen Übergeben Sie die Parameter:

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Tatsächlich gibt es eine einfachere Möglichkeit, das Debugging-Szenario für npm-Skripte zu kapseln:

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Geben Sie einfach den Befehl an, der direkt ausgeführt werden soll :

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Zum Beispiel werden wir dieses von create-react-app erstellte Reaktionsprojekt verwenden, um das Debuggen von NPM-Skripten zu versuchen:

Gehen Sie zuerst zu node_modules/.bin und fügen Sie einen Haltepunkt in diese Datei ein:

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Klicken Sie dann auf „Debuggen“, um zu starten:

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Sie werden feststellen, dass das Startmodul unter „Skripts“ ausgeführt wird:

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Gehen wir zum Start und setzen einen Haltepunkt:

Unterbrechen Sie die Codeausführung hier:

1Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Diese Konfiguration ist eine Webpack-Konfiguration:

1Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Gehen Sie weiter nach unten und Sie werden feststellen, dass ein Server gestartet ist:

1Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Lassen Sie uns einen Haltepunkt in die Rückruffunktion des Serverstarts setzen, um zu sehen, wie der Browser geöffnet wird: 🔜 im Try-Catch ignoriert:

1Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Sie können es sehen, indem Sie mit der Maus über diese Browser fahren:

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Lassen Sie den Haltepunkt los, und Sie werden feststellen, dass der Browser geöffnet ist:

1Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführenAuf diese Weise haben wir React-Scripts aussortiert starten Der Prozess?

Um es so zusammenzufassen:

  • Führen Sie gemäß dem eingegebenen Startbefehl die Skripte/das Startmodul aus.
  • Erstellen Sie gemäß der Konfiguration das Compiler-Objekt von Webpack.
  • Erstellen Sie WebpackDevServer.
  • Server. Starten Sie nach dem Start den Browser, um die URL zu öffnen Das Öffnen der URL besteht darin, diese der Reihe nach über den Browser von osascripts auszuprobieren.
  • Darüber hinaus gibt es keinen Unterschied zwischen der Ausführung eines Skripts im Debugging-Modus und dem Start von npm run direkt über die Befehlszeile.
Wenn Sie über den Unterschied sprechen möchten, könnte der einzige Unterschied dieser sein:

Im Standard-Debugging-Modus wird der Ausgabeinhalt im Debug-Konsolenfenster angezeigt:

Aber dies kann auch geändert werden:

1Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Kann auf integriert umgestellt werdenTerminal , dann wird es im Terminal ausgegeben:

Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Auf diese Weise gibt es keinen Unterschied zur üblichen npm-Laufstartausführung, und Sie können auch einen Haltepunkt für das Debuggen festlegen es lecker?

Schauen wir uns noch einmal ein Beispiel an, beispielsweise ein von vue cli erstelltes Vue-Projekt. Sie können die Webpack-Konfiguration in vue.config.js ändern: 2Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Aber was ist, wenn Sie wissen möchten, wie die Standardkonfiguration ist? console.log?

console.log Es ist keine gute Idee, große Objekte zu drucken. Es sieht so aus: 2Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Einige Schüler sagten, sie sollten JSON.stringify verwenden, was hässlicher ist und eine sehr lange Zeichenfolge hat.

Was wäre, wenn Sie wissen, wie man NPM-Skripte debuggt? 2Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Sie können eine Debugging-Konfiguration vom Typ NPM hinzufügen:

Dann legen Sie einen Haltepunkt fest und führen Sie das Debug aus:

2Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Sie können alle Konfigurationen sehen.

Das von mir angegebene Beispiel gilt nur für Webpack, aber andere NPM-Skripte wie Babel, TSC, Eslint, Vite usw. verwenden alle dieselbe Debugging-Methode. 2Es gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen

Zusammenfassung

Jedes Projekt verfügt über NPM-Skripte. Die meisten Leute verwenden sie einfach, ohne sie zu debuggen, sodass sie die Prinzipien dieser Tools nicht kennen, selbst wenn sie sie täglich verwenden.

Diese Befehlszeilentools deklarieren ein bin-Feld in package.json und fügen es nach der Installation unter node_modules/.bin ein.

Sie können es mit dem Knoten node_modules/.bin/xx ausführen, Sie können es mit npx xx ausführen. Das am häufigsten verwendete sind npm-Skripte. Führen Sie es mit npm run xx aus.

Das Debuggen von NPM-Skripten ist das Debuggen von Knoten, aber der VSCode-Debugger wurde vereinfacht und kann die Debugging-Konfiguration vom Typ NPM direkt erstellen.

Nachdem die Konsole als integriertes Terminal konfiguriert wurde, wird das Protokoll an das Terminal ausgegeben, was sich nicht von der direkten Ausführung von npm run xx unterscheidet. Sie können auch einen Haltepunkt festlegen, um die Ausführungslogik anzuzeigen.

Zusätzlich zum Ausführen von NPM-Skripten können Sie auch die Implementierungslogik sortieren und an der gewünschten Stelle anhalten. Ist das nicht besser, als es direkt auszuführen?

Weitere Informationen zu Knoten finden Sie unter:

nodejs-Tutorial

!

Das obige ist der detaillierte Inhalt vonEs gibt tatsächlich eine bessere Möglichkeit, NPM-Skripte auszuführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage