Share
Im heutigen modernen Workflow unterscheidet sich der von uns in unseren Entwicklungsumgebungen erstellte Code erheblich vom Produktionscode, nachdem er durch Kompilierung, Minifizierung, Verkettung oder verschiedene andere Optimierungsprozesse ausgeführt wurde.
Hier kommen Quellkarten ins Spiel, indem wir die genaue Zuordnung in unserem Produktionscode auf den ursprünglich erstellten Code hinweisen. In diesem einführenden Lernprogramm nehmen wir ein einfaches Projekt und führen es durch verschiedene JavaScript-Compiler, um mit Quellkarten im Browser zu spielen.
Quellkarten bieten eine sprachunabhängige Möglichkeit, Produktionscode dem ursprünglich erstellten Code zuzuordnen.
Quellkarten bieten eine sprachunabhängige Möglichkeit, Produktionscode dem ursprünglichen Code zuzuordnen, der in Ihrer Entwicklungsumgebung erstellt wurde. Wenn wir uns schließlich die Codebasis anschauen, die für die Produktion erstellt und vorbereitet wurde, wird es sehr schwierig, genau zu bestimmen, wo sich die Linienzuordnung zu unserem ursprünglich erstellten Code befindet. Während des Kompilierens werden diese Informationen jedoch in einer Quellkarte gespeichert. Wenn Sie einen Zeilenabschnitt abfragen, wird die genaue Position in der Originaldatei an uns zurückgegeben. Dies bietet einen großen Vorteil für den Entwickler, da der Code dann lesbar wird - und sogar debuggbar ist!
In diesem Lernprogramm nehmen wir einen sehr einfachen Teil von JavaScript und SASS-Code, führen ihn durch verschiedene Compiler und sehen dann unsere Originaldateien mithilfe von Quellkarten im Browser. Laden Sie die Demo-Dateien herunter und beginnen Sie mit dem Starten!
Bitte beachten Sie, dass Chrome (Version 23) beim Schreiben dieses Artikels JavaScript-Quellkarten und sogar SASS-Quellkarten unterstützt. Firefox sollte in naher Zukunft ebenfalls Unterstützung erhalten, da es sich derzeit in einer aktiven Entwicklungsphase befindet. Lassen Sie uns wissen, wie wir die Quellkarten im Browser nutzen können!
Zunächst müssen wir die Unterstützung in Chrome mit den folgenden einfachen Schritten aktivieren:
Wenn Sie mit diesem Tutorial arbeiten möchten, laden Sie die Demo herunter und öffnen Sie das Verzeichnis "start". Die Datei- und Verzeichnisstruktur ist ziemlich einfach, mit ein paar einfachen JavaScript-Anweisungen scripts / script.js. Sie sollten sich öffnen können index.html Fügen Sie sogar einige CSS-Farbnamen oder Hex-Werte hinzu, um die Hintergrundfarbe zu ändern.
$ Baum. ├── index.html ├── Skripte ├── jquery.d.ts ├── ├── script.coffee.coffee ├── script.js └── script.typescript.ts └── styles ├─ ─ style.css └── style.sass
Schauen Sie sich die einfachen Skriptdateien in einfachem JavaScript, TypeScript oder CoffeeScript an. Mit verschiedenen JavaScript-Compilern erstellen wir eine produktionsbereite Version und generieren die entsprechenden Quellkarten.
In den folgenden Abschnitten verwenden wir fünf verschiedene Möglichkeiten, um kompilierte und minimierte zu generieren script.js, zusammen mit der zugehörigen Quellkarte. Sie können entweder alle Optionen testen oder einfach mit dem Compiler gehen, den Sie bereits kennen. Diese Optionen umfassen:
Closure Compiler von Google ist ein Tool zur Optimierung von JavaScript. Dazu analysieren Sie Ihren Code, entfernen irrelevante Bits und minimieren dann den Rest. Darüber hinaus kann es auch Quellkarten erstellen.
Führen Sie die folgenden Schritte aus, um eine optimierte Version von zu erstellen script.js, mit dem Closure-Compiler:
Accentsconagua
compiler.jar, zum Verzeichnis, Skripte.Skripte, von der Kommandozeile aus und führen Sie folgendes aus, damit eine optimierte, produktionsbereite script.closure.js Datei wird erstellt: java -jar compiler.jar --js script.js --js_output_file script.closure.js
index.html ist jetzt mit der neu erstellten Datei verknüpft, scripts / script.closure.js, durch Auskommentieren von Option A.
Wenn wir uns öffnen index.html Navigieren Sie im Browser und navigieren Sie zum Source Panel in den Entwicklerwerkzeugen nur die optimierte Version von script.closure.js wird referenziert; Wir haben keine Möglichkeit, eine Beziehung zu unserem Original herzustellen, die richtig eingerückt ist. Als Nächstes erstellen Sie die Quellkartendatei, indem Sie den folgenden Befehl in der Datei ausführen Skripte Verzeichnis:
java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format = V3 --js_output_file script.closure.js
Beachten Sie, dass der Closure Compiler zwei Optionen enthält, --create_source_map und --source_map_format, eine Quellkartendatei erstellen, script.closure.js.map, mit Source Map Version 3. Hängen Sie anschließend die Quell-Mapping-URL an das Ende der kompilierten Skriptdatei an, script.closure.js, so dass die optimierte Datei die Standortinformationen der Quellkarte enthält:
// @ sourceMappingURL = script.closure.js.map
Wenn wir das Projekt jetzt im Browser anzeigen, zeigt das Verzeichnis "scripts" im Quellbereich der Entwicklerwerkzeuge sowohl die Originaldatei als auch die optimierte Version, script.closure.js. Obwohl der Browser natürlich die optimierte Datei verwendet, auf die wir ursprünglich verwiesen haben index.html, Quellkarten ermöglichen es uns, eine Verbindung zur Originaldatei herzustellen.
Probieren Sie es auch mit Haltepunkten für das Debugging aus. Beachten Sie jedoch, dass Watch-Ausdrücke und -Variablen in Quellkarten noch nicht verfügbar sind. Hoffentlich werden sie in der Zukunft sein!
Wenn Sie Grunt.js bereits für Buildprozesse verwenden, ist das Grunt-Plugin für JSMin-Quellkarten hilfreich. Es optimiert nicht nur Ihren Code, sondern erstellt auch die Quellzuordnung!
Die folgenden Schritte zeigen, wie Sie eine optimierte Version von erstellen script.js mit dem Grunt JSMin Plugin:
grunt.js, im Stammverzeichnis des "start" -Verzeichnisses: $ npm install -g grunt $ npm Ansicht grunt Version npm http GET https://registry.npmjs.org/grunt npm http 200 https://registry.npmjs.org/grunt 0.3.17 $ grunt init: gruntfile
node_modules / grunt-jsmin-sourcemap wird erstellt: $ npm install grunt-jsmin-sourcemap
grunt.js Datei nur das enthalten jsmin-sourcemap Aufgabe - die Dinge so einfach wie möglich zu halten. module.exports = function (grunt) grunt.loadNpmTasks ('grunt-jsmin-sourcemap'); grunt.initConfig ('jsmin-sourcemap': alle: src: ['scripts / script.js']), dest: 'scripts / script.jsmin-grunt.js', destMap: 'scripts / script.jsmin- grunt.js.map '); grunt.registerTask ('default', 'jsmin-sourcemap'); ; grunzen; Dadurch wird die Task jsmin-sourcemap ausgeführt, da die Standardaufgabe in der Datei grunt.js als solche angegeben ist: $ grunt Ausführen der Task "jsmin-sourcemap: all" (jsmin-sourcemap) Fertig, ohne Fehler.
script.grunt-jsmin.js.map, Stellen Sie sicher, dass die Quelle ist "sources": ["script.js"]. script.grunt-jsmin.js, innerhalb index.html, und öffnen Sie sich im Browser.Mit Grunt und dem Plugin jsmin-sourcemap erstellte der Erstellungsprozess zwei Dateien: die optimierte Skriptdatei mit der Quellzuordnungs-URL am unteren Rand sowie eine Quellenzuordnung. Sie benötigen beide, um alle im Browser anzuzeigen.
UglifyJS2 ist ein weiterer JavaScript-Parser, Minfier und Kompressor. Ähnlich wie die beiden oben genannten Alternativen erstellt UglifyJS2 eine optimierte Skriptdatei, die mit einer Quell-Zuordnungs-URL und einer Quell-Zuordnungsdatei versehen ist, die die Zuordnung zur Originaldatei enthält. Um UglifyJS zu verwenden, führen Sie Folgendes in der Befehlszeile des Verzeichnisses "start" aus:
uglify-js, örtlich; ein Verzeichnis, genannt nocde_module / uglify-js, wird erstellt. $ npm install uglify-js $ npm Ansicht uglify-js Version 2.2.3 $ cd-Skripte /
--Quellkarte und --Ausgabe, um die Ausgabedatei zu benennen. uglifyjs --source-map script.uglify.js.map --output script.uglify.js script.js
index.html ist korrekt mit dem Skript verknüpft, script.uglify.js 
Für die vorherigen drei Optionen haben wir nur eine einstufige Optimierung benötigt, vom ursprünglichen Code bis zum optimierten JavaScript. Für Sprachen wie CoffeeScript benötigen wir jedoch einen zweistufigen Prozess: CoffeeScript> JavaScript> optimiertes JavaScript. In diesem Abschnitt erfahren Sie, wie Sie mit CoffeeScript und dem CoffeeScript Redux-Compiler mehrstufige Quellkarten erstellen.
Navigieren Sie in der Befehlszeile zum Verzeichnis "start". In den folgenden Schritten ordnen wir die optimierte Skriptdatei wieder dem CoffeeScript zu:
script.coffee.coffee, So erstellen Sie eine einfache JavaScript-Version mit dem folgenden Befehl: $ coffee -c scripts / script.coffee.coffee
$ git clone https://github.com/michaelficarra/CoffeeScriptRedux.git coffee-redux $ cd coffee-redux $ npm installiere $ make -j test $ cd…
script.coffee.js.map, Dadurch werden die Zuordnungsinformationen aus dem generierten JavaScript in der CoffeeScript-Datei gespeichert: $ coffee-redux / bin / coffee --source-map -i scripts / script.coffee.coffee> scripts / script.coffee.js.map
script.coffee.js, hat am Ende die Quell-Mapping-URL mit der folgenden Zeile: // @ sourceMappingURL = script.coffee.js.map
script.coffee.js.map, hat die richtige Referenzdatei als "Datei": "script.coffee.coffee", und Quelldatei als "sources": ["script.coffee.coffee"] $ cd scripts / $ uglifyjs script.coffee.js -o script.coffee.min.js --source-map script.coffee.min.js.map --in-source-map script.coffee.js.map
script.coffee.min.js.map, hat die richtige Referenzdatei als "Datei": "script.coffee.min.js", und die richtigen Quellen als "sources": ["script.coffee.coffee"].
TypeScript erfordert ebenso wie CoffeeScript einen zweistufigen Prozess: TypeScript> Plain JavaScript> Reduziertes JavaScript. Da das Skript ein jQuery-Plugin verwendet, benötigen wir zwei TypeScript-Dateien, die bereits bereitgestellt werden: script.typescript.ts und jquery.d.ts.
Navigieren Sie in der Befehlszeile zum Verzeichnis "scripts" und führen Sie den folgenden Befehl aus:
$ tsc script.typescript.ts -sourcemap
Der obige Befehl erstellt eine neue JavaScript-Datei mit dem Namen script.typescript.js, mit der Quell-Mapping-URL unten: // @ sourceMappingURL = script.typescript.js.map. Mit diesem einzigen Befehl wird auch die Map-Datei erstellt, script.typescript.js.map.
Wie beim CoffeeScript-Beispiel besteht der nächste Schritt in der Verwendung von UglifyJS.
$ uglifyjs script.typescript.js -o script.typescript.min.js --source-map script.typescript.min.js.map --in-source-map script.typescript.js.map
Zum Schluss stellen Sie das sicher index.html verlinkt auf die richtige Skriptdatei, scripts / script.typescript.min.js, und öffnen Sie es im Browser!
Neben JavaScript unterstützt Chrome derzeit auch SASS- oder SCSS-Quellkarten. Lassen Sie uns für die SASS-Quellenzuordnung einige Einstellungen in Chrome ändern und dann SASS mit Debug-Parametern in CSS kompilieren:
@media -sass-debug-info das wird die Information über den Dateinamen und die Zeilennummer haben. $ cd styles / $ sass --debug-info --watch style.sass: style.css
Wenn Sie nicht nur die SASS-Datei anzeigen, sondern auch LiveReload im Hintergrund ausführen und Änderungen an der SASS-Datei vornehmen, wird die Seite auch aktualisiert, um die Änderungen zu berücksichtigen. Lassen Sie uns beispielsweise das Projekt in Firefox öffnen und die Seite mit der Firebug-Erweiterung überprüfen.
Wenn wir einen der sehen *.Karte Dateien, enthält es die Zuordnungsinformationen von der Originaldatei zur optimierten Datei. Die Struktur einer Quellenzuordnung ist normalerweise im JSON-Format und verwendet die Spezifikationen der Version 3. Es enthält normalerweise die folgenden fünf Eigenschaften:
Quellkarten sind noch sehr in der Entwicklung, aber im Web gibt es bereits einige großartige Ressourcen. Beachten Sie unbedingt die folgenden Hinweise, wenn Sie mehr erfahren möchten.
Ich hoffe, dass der oben beschriebene Durchgang mit mehreren Compilern das Potenzial von Quellkarten demonstriert hat. Obwohl die Funktionalität derzeit begrenzt ist, haben wir hoffentlich in Zukunft volle Debugging-Fähigkeit, einschließlich Zugriff auf Variablen und Ausdrücke.
