Share
I dagens moderne arbeidsflyt er koden vi forfatter i våre utviklingsmiljøer, betydelig forskjellig fra produksjonskoden, etter å ha kjørt den gjennom kompilering, minifisering, sammenkobling eller forskjellige andre optimaliseringsprosesser.
Dette er hvor kildekartene kommer inn i spill, ved å peke ut den nøyaktige kartleggingen i vår produksjonskode til den opprinnelige forfatterkoden. I denne innledende veiledningen tar vi et enkelt prosjekt, og kjører det gjennom ulike JavaScript-kompilatorer for å spille med kildekart i nettleseren.
Kildekart tilbyr en språk-agnostisk måte å kartlegge produksjonskoden til den opprinnelige koden som ble skrevet.
Kildekart tilbyr en språk-agnostisk måte å kartlegge produksjonskoden til den opprinnelige koden som ble skrevet i utviklingsmiljøet. Når vi til slutt ser på kodebasen, generert og forberedt for produksjon, blir det veldig utfordrende å finne nøyaktig hvor linjelinjen til vår opprinnelige forfatterkode er. Under samling lagrer imidlertid et kildeskart denne informasjonen, slik at når vi spør om en linjeseksjon, vil den returnere den nøyaktige plasseringen i den opprinnelige filen til oss! Dette gir en stor fordel for utvikleren, da koden blir lesbar - og til og med debuggbar!
I denne opplæringen tar vi en veldig enkel del av JavaScript og SASS-koden, kjører dem gjennom ulike kompilatorer, og ser deretter våre originale filer i nettleseren ved hjelp av kildekart. Gå videre og last ned demo filene og la oss komme i gang!
Vær oppmerksom på at Chrome (Versjon 23) støtter JavaScript Kildekart, og til og med SASS Source Maps, mens du skriver denne artikkelen. Firefox bør også få støtte i nær fremtid, da den er i en aktiv fase av utviklingen. Med det ordet forsiktig ut av veien, la oss nå se hvordan vi kan dra nytte av kildekart i nettleseren!
Først må vi aktivere støtte i Chrome ved hjelp av følgende enkle trinn:
Hvis du vil jobbe sammen med denne opplæringen, last ned demoen og åpne "start" -katalogen. Filene og katalogstrukturen er ganske grunnleggende, med noen enkle JavaScript-innstillinger scripts / script.js. Du bør kunne åpne index.html og til og med legge til noen CSS-fargenavn eller hex-verdier for å endre bakgrunnsfargen.
$ treet. ├── index.html ├── skript │ ├── jquery.d.ts │ ├── script.coffee.coffee │ ├── script.js │ └─ - script.typescript.ts └─ - stiler ├─ ─ style.css └── style.sass
Ta en titt gjennom enkle skriptfiler i vanlig JavaScript, TypeScript eller CoffeeScript. Ved hjelp av ulike JavaScript-kompilatorer, oppretter vi en produksjonsklar versjon, samt genererer tilsvarende kildekart.
I de følgende avsnittene bruker vi fem forskjellige måter å generere en kompilert og minifisert script.js, sammen med det tilhørende kildeskartet. Du kan enten velge å teste ut alle alternativene, eller bare gå med kompilatoren som du allerede er kjent med. Disse alternativene inkluderer:
Closure Compiler, av Google, er et verktøy for optimalisering av JavaScript. Det gjør dette ved å analysere koden din, fjerne irrelevante biter, og deretter redusere resten. I tillegg kan det også generere kildekart.
La oss bruke følgende trinn for å opprette en optimalisert versjon av script.js, ved hjelp av Closure-kompilatoren:
Accentsconagua
compiler.jar, til katalogen, skript.skript, fra kommandolinjen, og utfør følgende, slik at en optimalisert, produksjonsklar script.closure.js filen vil bli opprettet: java -jar compiler.jar --js script.js --js_output_file script.closure.js
index.html er nå koblet til den nylig opprettede filen, scripts / script.closure.js, ved å ikke velge alternativ A.
Når vi åpner index.html i nettleseren og navigere til Source Panel i utviklerverktøyene, bare den optimaliserte versjonen av script.closure.js er referert; Vi har ingen måte å lage en relasjon tilbake til vår original, ordentlig innrykket. La oss opprette kildekartfilen ved å utføre følgende kommando i skript katalogen:
java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format = V3 --js_output_file script.closure.js
Legg merke til at Closure Compiler tar i to alternativer, --create_source_map og --source_map_format, å opprette en kildekartfil, script.closure.js.map, med kildekart versjon 3. Deretter legger du til kildekartleggingsadressen til slutten av den kompilerte skriptfilen, script.closure.js, slik at den optimaliserte filen inneholder kartinformasjonen for kilden:
// @ sourceMappingURL = script.closure.js.map
Nå, når vi ser prosjektet i nettleseren, vil "skript" -katalogen under kildepanelet i utviklerverktøyene vise både den opprinnelige filen og den optimaliserte versjonen, script.closure.js. Selv om nettleseren selvfølgelig bruker den optimaliserte filen som vi opprinnelig refererte til index.html, kildekart gir oss mulighet til å opprette en forbindelse til den opprinnelige filen.
Prøv også det med breakpoints for debugging, men husk at klokkeuttrykk og variabler ikke er tilgjengelige med kildekart. Forhåpentligvis vil de være i fremtiden!
Hvis du allerede bruker Grunt.js for å bygge prosesser, vil Grunt-plugin-modulen for JSMin-kildekartene komme til nytte. Ikke bare vil det optimalisere koden din, men det vil også opprette kildekartet!
Følgende trinn vil vise hvordan du oppretter en optimalisert versjon av script.js med Grunt JSMin-plugin:
grunt.js, i roten av "start" -katalogen: $ npm installere -g grunt $ npm se grunt versjon 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 vil bli opprettet: $ npm installere grunt-jsmin-sourcemap
grunt.js fil for å bare inneholde JSMin-sourcemap oppgave - å holde ting så enkelt som mulig. module.exports = funksjon (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 ('standard', 'jsmin-sourcemap'); ; grynte; Dette vil utføre jsmin-sourcemap-oppgaven, da standardoppgaven er oppgitt som sådan i grunt.js-filen: $ grunt Kjører "jsmin-sourcemap: all" (jsmin-sourcemap) oppgave Gjort, uten feil.
script.grunt-jsmin.js.map, Kontroller at kilden er "kilder": [ "script.js"]. script.grunt-jsmin.js, innenfor index.html, og åpne i nettleseren.Med Grunt og plugin, jsmin-sourcemap, opprettet prosessen to filer: Den optimaliserte skriptfilen med kildekartleggingsadressen nederst, samt et kildeskart. Du trenger begge disse for å vise dem alle i nettleseren.
UglifyJS2 er en annen JavaScript parser, minfier og kompressor. I likhet med de to alternativene ovenfor, vil UglifyJS2 opprette en optimalisert skriptfil, vedlagt med en kildekartingsliste, samt en kildekartfil som vil inneholde kartleggingen til den opprinnelige filen. For å bruke UglifyJS, utfør følgende i kommandolinjen i "start" -katalogen:
uglify-js, lokalt; en katalog, kalt nocde_module / uglify-js, vil bli opprettet. $ npm installere uglify-js $ npm se uglify-js versjon 2.2.3 $ cd-skript /
--source-kartet og --produksjon, for å navngi utdatafilen. uglifyjs - kildeskjema script.uglify.js.map --output script.uglify.js script.js
index.html er riktig koblet til skriptet, script.uglify.js 
For de tre foregående alternativene krever vi bare en trinns optimalisering, fra den opprinnelige koden til det optimaliserte JavaScript. Men for språk som CoffeeScript trenger vi en to-trinns prosess: CoffeeScript> JavaScript> optimalisert JavaScript. I denne delen skal vi utforske hvordan du lager multi-level source-kart med CoffeeScript og CoffeeScript Redux-kompilatoren.
Naviger til katalogen, "start", i kommandolinjen. I de følgende trinnene vil vi kartlegge den optimaliserte skriptfilen tilbake til CoffeeScript:
script.coffee.coffee, å opprette en vanlig JavaScript-versjon, ved å bruke følgende kommando: $ kaffe -c skript / script.coffee.coffee
$ git klone https://github.com/michaelficarra/CoffeeScriptRedux.git coffee-redux $ cd kaffe-redux $ npm installere $ make -j test $ cd ...
script.coffee.js.map, som vil holde kartleggingsinformasjonen fra den genererte JavaScript tilbake til CoffeeScript-filen: $ coffee-redux / bin / coffee - kilder-kart -i skript / script.coffee.coffee> skript / script.coffee.js.map
script.coffee.js, har kildekartingsadressen rett på slutten med følgende linje: // @ sourceMappingURL = script.coffee.js.map
script.coffee.js.map, har den riktige referansefilen som "Fil": "script.coffee.coffee", og kildefil som "kilder": [ "script.coffee.coffee"] $ cd scripts / $ uglifyjs script.coffee.js -o script.coffee.min.js - kildeskjema script.coffee.min.js.map - i kilde-kart script.coffee.js.map
script.coffee.min.js.map, har den riktige referansefilen som "Fil": "script.coffee.min.js", og de riktige kildene som "kilder": [ "script.coffee.coffee"].
TypeScript, akkurat som CoffeeScript, krever også en to-trinns prosess: TypeScript> Vanlig JavaScript> Minifisert JavaScript. Fordi manuset bruker et jQuery-plugin, trenger vi to TypeScript-filer, som allerede er gitt: script.typescript.ts og jquery.d.ts.
Naviger til "skript" katalogen fra kommandolinjen, og utfør følgende kommando:
$ tsc script.typescript.ts -surkemap
Kommandoen ovenfor vil opprette en ny JavaScript-fil, kalt script.typescript.js, med kildekartleggingsadressen nederst: // @ sourceMappingURL = script.typescript.js.map. Med denne kommandoen vil den også lage kartfilen, script.typescript.js.map.
Som med CoffeeScript-eksemplet, er neste trinn å bruke UglifyJS.
$ uglifyjs script.typescript.js -o script.typescript.min.js --source-map script.typescript.min.js.map - i-kilde-map script.typescript.js.map
Til slutt, sørg for at index.html koblinger til riktig skriptfil, scripts / script.typescript.min.js, og åpne den i nettleseren!
Utover JavaScript, støtter Chrome også SASS- eller SCSS-kildekart. For SASS kilde kartlegging, la oss endre noen innstillinger i Chrome, og kompilere SASS til CSS med feilsøkingsparametere:
@media -sass-debug-info som vil ha informasjon om filnavn og linjenummer. $ cd stiler / $ sass --debug-info - watch style.sass: style.css
Utover å bare se SASS-filen, hvis du kjører LiveReload i bakgrunnen og gjør endringer i SASS-filen, vil siden også oppdateres for å gjenspeile endringene. For eksempel, la oss åpne prosjektet i Firefox, og inspisere siden, ved hjelp av Firebug-utvidelsen.
Hvis vi ser noe av *.kart filer, vil det inneholde kartleggingsinformasjonen fra den opprinnelige filen til den optimaliserte filen. Strukturen til et kildekart er vanligvis i JSON-formatet, med versjon 3-spesifikasjonene. Det vil vanligvis inneholde følgende fem egenskaper:
Kildekart er fortsatt veldig under aktiv utvikling, men allerede er det noen gode ressurser tilgjengelig på nettet. Husk å vurdere følgende hvis du vil lære mer.
Jeg håper at ovenstående gjennomgang gjennom flere kompilatorer har vist potensialet for kildekart. Selv om funksjonaliteten for øyeblikket er begrenset, vil vi forhåpentligvis i fremtiden ha full feilsøkingskapasitet, inkludert tilgang til variabler og uttrykk.
