|
|
Veröffentlicht am 30.06.2022 20:04:02
|
|
|
|
Anforderungen: Bereitstellen Sie den Frontend-Projektcode (Angular, Vue) in der Produktionsumgebung aus, und das Projekt ist inDer Kompilierungsprozess komprimiert und verschleiert den CodeWenn während der Kompilierung eine Kartendatei generiert wird, können wir die Kartendatei verwenden, um den Standort der Quelldatei zu lokalisieren.
Was ist Sourcemap?
Eine Quellkarte ist im Wesentlichen eine Informationsdatei, die die entsprechenden Standortinformationen vor und nach der Code-Konvertierung speichert. Es zeichnet den Quellcodestandort vor der Konvertierung entsprechend dem komprimierten Code auf und ist eine Abbildung zwischen Quellcode und Produktionscode. Sourcemap löst das Problem, dass während des Verpackungsprozesses der Code komprimiert, despaced, kompiliert und transformiert wird, was aufgrund der großen Unterschiede zwischen den Codes zur Unmöglichkeit zum Debuggen führt.
Die Rolle der Sourcemap
Einfach ausgedrückt baut Sourcemap eine Brücke zwischen Vorverarbeitung und Nachbearbeitung, sodass es einfach ist, Fehler in der Produktion zu finden. Da die heutige Frontend-Entwicklung modular und komponentenbasiert ist, kann das Zusammenführen und Komprimieren von JS- und CSS-Dateien vor dem Live-Start leicht zu Verwirrung führen. Die Funktion von SourceMap besteht darin, es dem Debugging-Panel des Browsers zu ermöglichen, den generierten Code auf die Quellcodedatei abzubilden, und Entwickler können in der Quellcodedatei debuggen, was das Debuggen für Programmierer deutlich einfacher und einfacher macht.
Erstens erstelle ein neues Angular-Projekt und schreibe einen problematischen Code.
Der HTML-Code ist wie folgt:
Der TS-Code lautet wie folgt:
In der Entwicklungsphase ist es bei einem Fehler sehr einfach, den falschen Ort zu finden, wie in der untenstehenden Abbildung gezeigt:
Bauen Sie das Projekt in ein Release-Paket ein und generieren Sie mit folgendem Befehl eine Map-Datei:
Stellen Sie die resultierende Datei auf einem HTTP-Server wie IIS, Nginx usw. bereit. ZwischenzeitVerschieben Sie die Kartendatei in ein anderes Verzeichnis, praktisch zum Testen.
Zu diesem Zeitpunkt können wir die Fehlermeldung und den Quellcode nicht intuitiv sehen; wir installieren das "Source Code Locator Tool" mit folgendem Befehl:
Parameter-Einführung:
Usage: sl [options]
Options:
-v, --Version geben die Versionsnummer aus
-p, --source-flie-path Die erzeugte Quelldatei kompilierte Kartendatei
-l, --ine Die Zeilennummer in der generierten Quellcode-kompilierten Codezeile
-c, --Spalte Die Spaltennummer in der erzeugten Quelle
-h, --hilf bei der Ausgabe von Nutzungsinformationen
(Ende)
|
Vorhergehend:Extrahiere den gesamten Text aus einer PDF-Datei mit C# (unterstützt .NET Core)Nächster:Frontend-Kenntnisse von JavaScript, allgemein bekannt als ES6, ES8, ES 2017, ECMAScript
|
Veröffentlicht am 30.06.2022 21:36:37