Javascript .map-Dateien - javascript-source-maps

Vor kurzem habe ich gesehen-Dateien mit .js.map Erweiterung ausgeliefert, mit einigen JavaScript-Bibliotheken (wie Kantig), und hob nur paar Fragen in meinem Kopf:

  • Was ist es? Warum die Jungs bei Winkel-Pflege zu liefern .js.map Datei?
  • Wie kann ich (als JavaScript-Entwickler) verwenden Sie die angular.min.js.map Datei?
  • Sollte ich kümmern uns um die Erstellung .js.map Dateien für meine JavaScript-Anwendungen?
  • Und wie wird er erstellt? Ich warf einen Blick auf angular.min.js.map und es war voll mit Fremd-formatierte Zeichenfolgen, so dass ich annehme, dass es nicht manuell erstellt werden.

InformationsquelleAutor der Frage Muhammad Reda | 2014-02-12

  1. 390

    Den .map Dateien sind für js und css (und jetzt ts zu) Dateien minified. Sie sind aufgerufen, SourceMaps. Beim verkleinern einer Datei, wie die angular.js Datei, dauert es Tausende von Linien des hübschen code und verwandelt es in nur wenigen Zeilen hässlichen code. Hoffentlich, wenn Sie zum Versand eines Codes an die Produktion, sind Sie mit den minified code anstelle des vollen, unminified version. Wenn Ihre app in der Produktion, und hat einen Fehler, der sourcemap wird helfen, nehmen Sie Ihre hässlich-Datei, und Sie können sehen, dass die ursprüngliche version des Codes. Wenn Sie nicht über die sourcemap, dann ist jeder Fehler scheint cryptic am besten.

    Gleiche für CSS-Dateien. Sobald Sie eine SASS-oder LESS-Datei und kompilieren Sie es in CSS, es sieht nichts, wie die ursprüngliche form. Wenn Sie aktivieren die sourcemaps, dann können Sie den ursprünglichen Zustand der Datei, statt des geänderten Zustand.

    So, beantworten Sie die Fragen in der Reihenfolge:

    • Was ist es? De-Referenz uglified code
    • Wie kann ein Entwickler diese verwenden? Verwenden Sie es für das Debuggen einer Produktions-app. Im development-Modus können Sie die volle version von Angular. In der Produktion verwenden, würden Sie die minified version.
    • Sollte es mich kümmern, über die Schaffung eines js.map-Datei? Wenn Sie sich sorgen über die Möglichkeit, zu Debuggen Produktion von code zu erleichtern, dann ja, sollten Sie es tun.
    • Und wie wird er erstellt? Es wird erstellt, zur build-Zeit. Es gibt build-tools, die aufbauen können Ihre .map-Datei für Sie-ebenso wie andere Dateien. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

    Ich hoffe, das macht Sinn.

    InformationsquelleAutor der Antwort frosty

  2. 22

    Wollte nur den Fokus auf das Letzte Teil der Frage; Wie die Quell-map-Dateien erstellt werden? durch die Auflistung der build-tools, die ich kenne, die können erstellen source-Karten.

    1. Grunt: mit plugin grunt-contrib-verunstalten
    2. Gulp: mit plugin gulp-verunstalten
    3. Google closure: mit dem parameter --create_source_map

    Ich weiß nicht, ob es gibt andere tools, die das erstellen source-Karten.

    InformationsquelleAutor der Antwort Muhammad Reda

  3. 19

    • Wie kann ein Entwickler diese verwenden?
      Ich wusste nicht, finden Antwort in den Kommentaren, hier ist, wie können verwendet werden:

      1. Nicht link Ihre js.map-Datei in Ihrem index.html Datei (brauche ich nicht)
      2. Minifiacation tools (die guten) einen Kommentar hinzufügen, um Ihre .min.js Datei: //# sourceMappingURL=yourFileName.min.js.Karte , die Verbindung wird Ihr .map-Datei

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

    1. Chrome: Open-dev-tools, navigieren Sie zu "Quellen" - Registerkarte, werden Sie sehen, "Quellen" - Ordner, wo unminifide Anwendungen, die Dateien sind zu halten

    InformationsquelleAutor der Antwort garfunkel61

  4. 10

    Die map-Datei ordnet die unminified-Datei, um die minified Datei. Wenn Sie änderungen in der unminified-Datei, werden die änderungen automatisch auf die minified-version der Datei.

    InformationsquelleAutor der Antwort Surendra Yadav

  5. 2

    Nur um Verwendung von map-Dateien. Ich benutze chrome für ubuntu und wenn ich gehe, um zu Quellen, und klicken Sie auf eine Datei, wenn es eine map-Datei eine Meldung kommt, die sagen mir, ich kann die original-Datei und wie es zu tun.

    Für die Winkel-Dateien, mit denen ich zusammenarbeitete, habe ich heute auf

    Strg-P
    und eine Liste der ursprünglichen Dateien erscheint in einem kleinen Fenster.

    Kann ich dann Blättern Sie durch die Liste, um die Datei anzuzeigen, möchte ich untersuchen und prüfen, wo das Problem sein könnte.

    InformationsquelleAutor der Antwort rotato poti

Schreibe einen Kommentar