2014-02-11 3 views
22

Ich habe einen zweistufigen Kompilierungsprozess für meine Webanwendung. Erstens kompiliere ich CoffeeScript-Dateien in JavaScript-Dateien [1]. Dann werden die JavaScript-Dateien (sowohl solche, die von CoffeeScript kommen, als auch externe, wie von AngularJS-Templates von grunt-angular-templates erzeugt) vom Google Closure Compiler [2] in eine einzige minimierte Datei kompiliert.Kombinieren Sie Quellkarten zweier Kompilierungsschritte

CoffeeScript ---[1]---> JavaScript --[2]--\ 
              \-> 
AngularJS templates --> JavaScript ----------> single minimized JS file 
              /-> 
        other JS files -------/ 

Beide Schritte [1] und [2] erzeugen Quellkarten.

Ist es möglich, diese Quellkarten in einer einzigen Quellkarte zu kombinieren, mit der ich CoffeeScript-Dateien von einem Webbrowser aus debuggen kann, der die minimierte JS-Datei ausführt?

Mit anderen Worten: Lassen Sie sagen, dass die Quelle Karte [1] durch eine Funktion dargestellt wird:

f(position in CoffeeScript) = position in JavaScript 

und die Quelle Karte [2] durch eine Funktion dargestellt wird:

g(position in JavaScript) = position in minimized JS 

I Möchte eine Quellkarte erhalten, die durch eine Funktionszusammensetzung dargestellt wird:

h(position in CoffeeScript) = g(f(position in CoffeeScript)) = 
          = position in minimized JS 

Antwort

3

So gut kann ich sagen die Quellkartenspezifikation (und andere Diskussionen), hat Multi-Level-Mapping noch nicht

https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?pli=1#heading=h.e8hx254xu4sa

Quelle Karten Revision 3 definiert; Multi-level Mapping Hinweise

Möglicherweise hat jemand einige Tools entwickelt, um dies zu beheben, vielleicht in einem Github-Repository. Natürlich haben Sie sowohl die Tools, um solche Karten zu generieren, und Browser, die sie verwenden können.

https://hacks.mozilla.org/2013/05/compiling-to-javascript-and-debugging-with-source-maps/ https://github.com/fitzgen/source-map

+0

Nun, in meinem Anwendungsfall interessiere ich mich nicht wirklich für die Zwischendatei, es ist nur ein Nebenprodukt ... jedenfalls sagt mir Ihre Antwort zumindest, dass diese Idee mit der aktuellen Implementierung von Quellkarten technisch machbar ist, und es gibt nur kein Werkzeug, das genau diese Operation ausführt. Vielen Dank. – liori

+0

Sieht aus wie 'Grunt' kann eine 2-stufige Karte handhaben, zumindest im Falle der Übergabe eines einzigen kompilierten' Coffeescript' durch 'uglify' - https://github.com/gruntjs/grunt-contrib-uglify – hpaulj

+1

Von der Seitenleiste : http://stackoverflow.com/questions/15964826 – hpaulj

15

Versuchen sorcery - es genau zu diesem Zweck entwickelt wurde (ich bin der Autor, ich herkam für Informationen zu Tools suchen). Solange sich die .map Dateien an der richtigen Stelle befinden (oder als Daten-URIs inline sind), führen Sie einfach sorcery für die generierte Datei aus und es wird die dazwischen liegenden Quellkarten finden und sie erstellen.

+0

Hallo Rich, könnte gibst du bitte ein beispiel wie du dein werkzeug zum beispiel mit gulp benutzt? Weil es aus Ihrer Dokumentation zu github nicht so offensichtlich ist, wie es geht. Vielen Dank im Voraus. – VladosJS

2

Closure Compiler implementiert jetzt --apply_input_source_maps (und --parse_inline_source_maps zum Booten). Das sollte genau das tun, was Sie hier erreichen wollen, keine zusätzlichen Werkzeuge erforderlich.

+1

Kein zusätzliches Werkzeug erforderlich, wenn nur zwei Phasen der Codeumwandlung vorhanden sind. – liori

+0

@liori Ja, für den in dieser Frage beschriebenen Aufbau sind keine Werkzeuge erforderlich. Aber im Allgemeinen, solange alle Werkzeuge alle Quellkarten inline halten und alle Werkzeuge das Lesen von Inline-Source-Maps unterstützen (ich weiß, dass nicht alle das tun, aber das scheint ein vernünftiges Ziel zu sein), sollte dieses Should All Work (tm). –

-1

Das combine-source-map Paket, ein Mozilla [source-map] -Wrapper sieht aus wie eine beliebte Alternative zu [Zauberei], wie Rich Harris had recommended (2M vs 32k Downloads).

Durch die eigene Beschreibung Produktseite, kombiniert-Source-Karte wird:

Add Quelle Karten von mehreren Dateien, sie versetzt und sie dann in eine Hand Karte kombinieren.

Nach der Auswertung merge-source-Karten es sieht vielversprechend aus, auch wenn es nur Dateisystem-basierten Quellen in Quelle Maps.Es stürzt bei der Verwendung von Inline-Quellen ab (kann eine Einschränkung des ursprünglichen Codes vom Closing-Compiler sein). Mit ein paar Änderungen kann auch die korrekte Verarbeitung von Inline-Quellen erreicht werden.