Share
I dagens moderna arbetsflöde är koden som vi författar i våra utvecklingsmiljöer väsentligt annorlunda än produktionskoden, efter att den körts genom kompilering, minifiering, sammanlänkning eller olika andra optimeringsprocesser.
Det här är källakartor som spelas in, genom att påpeka den exakta kartläggningen i vår produktionskod till den ursprungliga författade koden. I den här inledande handledningen tar vi ett enkelt projekt och kör det genom olika JavaScript-kompilatorer för att spela med källkartor i webbläsaren.
Källkartor erbjuder ett språk-agnostiskt sätt att kartlägga produktionskoden till den ursprungliga koden som var författad.
Källkartor erbjuder ett språk-agnostiskt sätt att kartlägga produktionskoden till den ursprungliga koden som var författad i din utvecklingsmiljö. När vi äntligen tittar på kodbasen, genererad och förberedd för produktion, blir det mycket utmanande att lokalisera exakt var linjekartläggningen till vår ursprungliga författad kod är. Under sammanställningen lagras emellertid en källkarta den här informationen, så att vi, när vi frågar en linjesektion, returnerar den exakta platsen i originalfilen till oss! Detta ger en stor fördel för utvecklaren, eftersom koden då blir läsbar - och även debuggbar!
I den här handledningen tar vi en mycket enkel bit av JavaScript och SASS-koden, kör dem genom olika kompilatorer och sedan se våra ursprungliga filer i webbläsaren med hjälp av källkartor. Gå vidare och ladda ner demofilerna och låt oss komma igång!
Observera att Chrome (Version 23) stöder JavaScript-källkartor och även SASS-källkartor när du skriver den här artikeln. Firefox bör också få stöd inom en snar framtid, eftersom den för närvarande befinner sig i ett aktivt utvecklingsstadium. Med det försiktighetssöket ur vägen, låt oss nu se hur vi kan utnyttja källkartor i webbläsaren!
Först måste vi aktivera stöd i Chrome med följande enkla steg:
Om du vill arbeta tillsammans med denna handledning, ladda ner demo och öppna "start" -katalogen. Filerna och katalogstrukturen är ganska grundläggande, med några enkla JavaScript in scripts / script.js. Du borde kunna öppna index.html och till och med lägga till några CSS-färgnamn eller hex-värden för att ändra bakgrundsfärgen.
$ träd. ├── index.html ├── scripts │ ├── jquery.d.ts │ ├── script.coffee.coffee │ ├── script.js │ └── script.typescript.ts └── stilar ├─ ─ style.css └── style.sass
Titta igenom de enkla skriptfilerna i vanlig JavaScript, TypeScript eller CoffeeScript. Med hjälp av olika JavaScript-kompilatorer skapar vi en produktionsklar version, samt genererar motsvarande källkartor.
I följande avsnitt använder vi fem olika sätt att generera en sammanställd och minifierad script.js, tillsammans med tillhörande källkarta. Du kan antingen välja att testa alla alternativ, eller helt enkelt gå med kompilatorn som du redan är bekant med. Dessa alternativ inkluderar:
Closure Compiler, av Google, är ett verktyg för att optimera JavaScript. Det gör det genom att analysera din kod, ta bort irrelevanta bitar och sedan minska resten. Utöver det kan det också skapa källkartor.
Låt oss använda följande steg för att skapa en optimerad version av script.js, med hjälp av Closure-kompilatorn:
Accentsconagua
compiler.jar, till katalogen, skript.skript, från kommandoraden, och kör följande, så att en optimerad, produktionsklar script.closure.js filen kommer att skapas: java -jar compiler.jar --js script.js --js_output_file script.closure.js
index.html är nu länkad till den nyskapade filen, scripts / script.closure.js, genom att inte kommentera Alternativ A.
När vi öppnar index.html i webbläsaren och navigera till källpanelen i utvecklingsverktygen, bara den optimerade versionen av script.closure.js hänvisas; Vi har ingen möjlighet att göra en relation tillbaka till vårt original, ordentligt indragna. Låt oss nu skapa källkartfilen genom att utföra följande kommando i skript katalogen:
java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format = V3 --js_output_fil script.closure.js
Observera att Closure Compiler tar två alternativ, --create_source_map och --source_map_format, för att skapa en källkartafil, script.closure.js.map, med källkortsversion 3. Lägg sedan till källkartläggningsadressen till slutet av den sammanställda skriptfilen, script.closure.js, så att den optimerade filen innehåller källkarta platsinformation:
// @ sourceMappingURL = script.closure.js.map
Nu, när vi tittar på projektet i webbläsaren, visar "skript" -katalogen under källpanelen i utvecklarverktygen både den ursprungliga filen och den optimerade versionen, script.closure.js. Även om webbläsaren förstås använder den optimerade filen som vi ursprungligen refererade till index.html, källkartor tillåter oss att skapa en anslutning till den ursprungliga filen.
Också, prova det med brytpunkter för debugging, men kom ihåg att klockuttryck och variabler inte är tillgängliga med källkartor. Förhoppningsvis kommer de att vara i framtiden!
Om du redan använder Grunt.js för byggprocesser kommer Grunt-plugin-programmet för JSMin-källkartor att vara till nytta. Det kommer inte bara att optimera din kod, men det kommer även att skapa källkartan!
Följande steg visar hur man skapar en optimerad version av script.js med Grunt JSMin-plugin:
grunt.js, i roten till "start" -katalogen: $ npm installera -g grunt $ npm visa 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 kommer att skapas: $ npm installera grunt-jsmin-sourcemap
grunt.js fil för att bara innehålla JSMin-sourcemap uppgift - att hålla saker så enkla som möjligt. module.exports = funktion (grunt) grunt.loadNpmTasks ('grunt-jsmin-sourcemap'); grunt.initConfig ('jsmin-sourcemap': alla: src: ['scripts / script.js'], dest: 'scripts / script.jsmin-grunt.js', destMap: 'scripts / script.jsmin- grunt.js.map '); grunt.registerTask ('default', 'jsmin-sourcemap'); ; grymta; Detta kommer att utföra uppgiften jsmin-sourcemap, eftersom standarduppgiften anges som sådan inom grunt.js-filen: $ grunt Running "jsmin-sourcemap: all" (jsmin-sourcemap) uppgift Gjord utan fel.
script.grunt-jsmin.js.map, se till att källan är "källor": [ "script.js"]. script.grunt-jsmin.js, inom index.html, och öppna i webbläsaren.Med Grunt och plugin, jsmin-sourcemap, skapade byggprocessen två filer: den optimerade skriptfilen med källkartläggningsadressen längst ner, liksom en källkarta. Du behöver båda dessa för att kunna se dem alla i webbläsaren.
UglifyJS2 är en annan JavaScript-parser, minfier och kompressor. I likhet med de två alternativen ovan kommer UglifyJS2 att skapa en optimerad skriptfil, bifogad med en källkartläggningsadress och en källkartfil som innehåller mappningen till originalfilen. För att använda UglifyJS, kör följande i kommandoraden i "start" -katalogen:
uglify-js, lokalt; en katalog som heter nocde_module / uglify-js, kommer att skapas. $ npm installera uglify-js $ npm visa uglify-js version 2.2.3 $ cd skript /
--source-karta och --produktion, för att namnge utdatafilen. uglifyjs - källkarta script.uglify.js.map --output script.uglify.js script.js
index.html är korrekt kopplad till skriptet, script.uglify.js 
För de tre föregående alternativen behövde vi bara en stegsoptimering, från den ursprungliga koden till den optimerade JavaScript. Men för språk som CoffeeScript behöver vi en tvåstegs process: CoffeeScript> JavaScript> optimerad JavaScript. I det här avsnittet kommer vi att undersöka hur man skapar Multi-Level Source Maps med CoffeeScript och CoffeeScript Redux-kompilatorn.
Navigera till katalogen, "start", i kommandoraden. I följande steg kommer vi att kartlägga den optimerade skriptfilen tillbaka till CoffeeScript:
script.coffee.coffee, för att skapa en vanlig JavaScript-version, med följande kommando: $ kaffe -c skript / script.coffee.coffee
$ git klon https://github.com/michaelficarra/CoffeeScriptRedux.git coffee-redux $ cd kaffe-redux $ npm installera $ make -j test $ cd ...
script.coffee.js.map, som kommer att hålla mappinformationen från den genererade JavaScript tillbaka till CoffeeScript-filen: $ coffee-redux / bin / coffee -source-map -i scripts / script.coffee.coffee> skript / script.coffee.js.map
script.coffee.js, har källkartläggningsadressen till höger i slutet med följande rad: // @ sourceMappingURL = script.coffee.js.map
script.coffee.js.map, har rätt referensfil som "Fil": "script.coffee.coffee", och källfil som "källor": [ "script.coffee.coffee"] $ cd skript / $ uglifyjs script.coffee.js -o script.coffee.min.js - källkarta script.coffee.min.js.map - in-source-map script.coffee.js.map
script.coffee.min.js.map, har rätt referensfil som "Arkiv": "script.coffee.min.js", och rätt källor som "källor": [ "script.coffee.coffee"].
TypeScript, precis som CoffeeScript, kräver också en tvåstegsprocess: TypeScript> Enkel JavaScript> Miniverad JavaScript. Eftersom skriptet använder ett jQuery-plugin behöver vi två TypeScript-filer, som redan finns: script.typescript.ts och jquery.d.ts.
Navigera till "skript" katalogen från kommandoraden och kör följande kommando:
$ tsc script.typescript.ts -surkemap
Ovanstående kommando kommer att skapa en ny JavaScript-fil, kallad script.typescript.js, med källkartläggningsadressen längst ner: // @ sourceMappingURL = script.typescript.js.map. Med det här kommandot kommer det också att skapa kartfilen, script.typescript.js.map.
Som med CoffeeScript-exemplet är nästa steg att använda UglifyJS.
$ uglifyjs script.typescript.js -o script.typescript.min.js - källkarta script.typescript.min.js.map - in-source-map script.typescript.js.map
Slutligen, se till att index.html länkar till rätt skriptfil, scripts / script.typescript.min.js, och öppna den i webbläsaren!
Utöver JavaScript stödjer Chrome för närvarande SASS- eller SCSS-källkartor. För SASS-källkartläggning, låt oss ändra några inställningar i Chrome och sedan kompilera SASS till CSS med felsökningsparametrar:
@media-sass-debug-info som kommer att ha information om filnamn och linjenummer. $ cd stilar / $ sass --debug-info - watch style.sass: style.css
Utöver att bara se SASS-filen, om du kör LiveReload i bakgrunden och gör ändringar i SASS-filen, uppdateras sidan för att spegla ändringarna. Till exempel, låt oss öppna projektet i Firefox och inspektera sidan, med Firebug-tillägget.
Om vi tittar på någon av *.Karta filer kommer den att innehålla mappinformationen från den ursprungliga filen till den optimerade filen. Strukturen för en källkarta är vanligtvis i JSON-formatet, med version 3-specifikationerna. Den innehåller vanligtvis följande fem egenskaper:
Källkartor är fortfarande mycket under aktiv utveckling, men redan finns det några stora resurser tillgängliga på webben. Var noga med att överväga följande om du vill lära dig mer.
Jag hoppas att ovanstående genomgång, med hjälp av flera kompilatorer, har visat potentialen i källkartor. Även om funktionaliteten för närvarande är begränsad, kommer vi förhoppningsvis att i framtiden ha fullständig felsökningsfunktion, inklusive tillgång till variabler och uttryck.
