Javascript .map-Dateien - Javascript-Quellkarten

357

Kürzlich habe ich Dateien mit .js.mapErweiterung gesehen, die mit einigen JavaScript-Bibliotheken (wie Angular ) ausgeliefert wurden, und das hat nur ein paar Fragen in meinem Kopf aufgeworfen:

  • Wofür ist das? Warum kümmern sich die Jungs von Angular darum, eine .js.mapDatei zu liefern ?
  • Wie kann ich (als JavaScript-Entwickler) die angular.min.js.mapDatei verwenden?
  • Sollte es mir wichtig sein, .js.mapDateien für meine JavaScript-Anwendungen zu erstellen?
  • Wie entsteht es? Ich habe es mir angesehen angular.min.js.mapund es war mit seltsam formatierten Zeichenfolgen gefüllt, daher gehe ich davon aus, dass es nicht manuell erstellt wurde.
javascript angularjs source-maps Muhammad Reda
quelle
1
html5rocks.com/de/tutorials/developertools/sourcemaps
Anand

Antworten:

550

Die .mapDateien sind für jsund css(und jetzt tsauch) Dateien, die minimiert wurden. Sie heißen SourceMaps. Wenn Sie eine Datei wie die Datei angle.js minimieren, werden Tausende von Zeilen hübschen Codes benötigt und in nur wenige Zeilen hässlichen Codes umgewandelt. Wenn Sie Ihren Code an die Produktion senden, verwenden Sie hoffentlich den minimierten Code anstelle der vollständigen, nicht minimierten Version. Wenn Ihre App in Produktion ist und einen Fehler aufweist, hilft die Quellkarte dabei, Ihre hässliche Datei aufzunehmen, und ermöglicht es Ihnen, die Originalversion des Codes anzuzeigen. Wenn Sie die Quellkarte nicht hätten, wäre jeder Fehler bestenfalls kryptisch.

Gleiches gilt für CSS-Dateien. Sobald Sie eine SASS- oder WENIGER-Datei in CSS kompiliert haben, sieht sie nicht mehr wie die ursprüngliche Form aus. Wenn Sie Quellkarten aktivieren, wird anstelle des geänderten Status der ursprüngliche Status der Datei angezeigt.

Um Ihre Fragen der Reihe nach zu beantworten:

  • Wofür ist das? Um hässlichen Code zu de-referenzieren
  • Wie kann ein Entwickler es verwenden? Sie verwenden es zum Debuggen einer Produktions-App. Im Entwicklungsmodus können Sie die Vollversion von Angular verwenden. In der Produktion würden Sie die minimierte Version verwenden.
  • Sollte es mich interessieren, eine js.map-Datei zu erstellen? Wenn es Ihnen wichtig ist, Produktionscode einfacher zu debuggen, sollten Sie dies tun.
  • Wie entsteht es? Es wird zur Erstellungszeit erstellt. Es gibt Build-Tools, mit denen Sie Ihre .map-Datei wie andere Dateien für Sie erstellen können. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

Ich hoffe das macht Sinn.

eisig
quelle
19
Beachten Sie, dass die Kartendatei erst gesendet wird, wenn Sie sie aufrufen. Das hat mich verwirrt. stackoverflow.com/a/27196201/861487
Abdelouahab
2
Danke Aaron, dies ist eine der besseren Beschreibungen, die ich für Sourcemap gesehen habe. Ich benutze es in Schluck und ich hatte fast alles über Schluck gelernt und fragte mich genau, wie die Quellenkarten verwendet wurden. Jetzt kann ich mich sicher fühlen, es zu benutzen. Die meisten Gulp-Plugins sind jetzt auch kompatibel mit denen vor einem Jahr, als einige dies nicht waren. Ich wollte nur sagen, dass es absolut sinnvoll ist!
Eric Bishard
@frosty Zum Verweisen auf hässlichen Code . Können Sie das bitte erklären? Unterhält eine .js.mapDatei nicht eine Beziehung (oft als Referenz bezeichnet ) zwischen einer handgefertigten Datei und einer minimierten Datei?
Mohammed Zameer
1
@student heißt es de-reference, weil ich nicht auf den minimierten Code verweisen möchte. Es ist minimiert und wenn ich es mir anschaue, ist es so gut wie wertlos. Aber wenn es auf die ursprüngliche Quelle zurückgreifen könnte, wäre das episch. Und genau das ist eine Quellenkarte. Ich hoffe das hilft.
frostig
Ich liebe diese Antwort (danke), aber sie hat 420 Likes ... breche ich sie?
Eric Reed
31
  • Wie kann ein Entwickler es verwenden?

Ich habe in den Kommentaren keine Antwort darauf gefunden. Hier ist, wie verwendet werden kann:

  1. Verknüpfen Sie Ihre js.map-Datei nicht mit Ihrer index.html-Datei (dies ist nicht erforderlich).

  2. Minifiacation-Tools (gute) fügen Ihrer .min.js- Datei einen Kommentar hinzu :

    // # sourceMappingURL = yourFileName.min.js.map

Dadurch wird Ihre .map- Datei verbunden.

Wenn die Dateien min.js und js.map fertig sind ...

  1. Chrome: Open dev-Tools , navigate auf Quellen Registerkarte Sie werden sehen , Quellen - Ordner, in dem nicht-minimierte Anwendungen Dateien aufbewahrt werden.
garfunkel61
quelle
14

Die Zuordnungsdatei ordnet die nicht minimierte Datei der minimierten Datei zu. Wenn Sie Änderungen an der nicht minimierten Datei vornehmen, werden die Änderungen automatisch in die minimierte Version der Datei übernommen.

Surendra Yadav
quelle
2

Nur um die Verwendung von Kartendateien zu ergänzen. Ich verwende Chrome für Ubuntu. Wenn ich zu Quellen gehe und auf eine Datei klicke, wird eine Meldung angezeigt, dass ich die Originaldatei anzeigen kann und wie das geht.

Für die Angular-Dateien, mit denen ich heute gearbeitet habe, klicke ich

Strg-P ​​und eine Liste der Originaldateien werden in einem kleinen Fenster angezeigt.

Ich kann dann die Liste durchsuchen, um die Datei anzuzeigen, die ich überprüfen möchte, und um zu überprüfen, wo das Problem liegen könnte.

Rotato Poti
quelle