Share
În fluxul de lucru modern al zilelor noastre, codul pe care îl scriem în mediile noastre de dezvoltare este considerabil diferit de codul de producție, după executarea acestuia prin compilare, minificare, concatenare sau alte procese de optimizare.
Acesta este locul unde hărțile sursă intră în joc, indicând cartografia exactă din codul nostru de producție la codul original creat. În acest tutorial introductiv, vom lua un proiect simplu și îl vom rula prin diferite compilatoare JavaScript pentru a juca cu hărțile sursă în browser.
Hărțile sursă oferă o metodă limbaj-agnostică de cartografiere a codului de producție la codul original care a fost scris.
Hărțile sursă oferă o modalitate lingvistică-agnostică de cartografiere a codului de producție la codul original care a fost creat în mediul dvs. de dezvoltare. Când ne uităm în cele din urmă la baza de coduri, generată și pregătită pentru producție, devine foarte dificilă localizarea exactă a locului unde este cartografia liniei către codul original creat. Totuși, în timpul compilării, o hartă sursă stochează această informație, astfel încât, atunci când vom interoga o secțiune de linie, aceasta va returna locația exactă în fișierul original la noi! Aceasta oferă un avantaj imens pentru dezvoltator, deoarece codul devine apoi citit - și chiar debuggabil!
În acest tutorial, vom lua un cod foarte simplu de cod JavaScript și SASS, le vom rula prin diverse compilatoare și apoi vom vizualiza fișierele noastre originale în browser cu ajutorul hărților sursă. Continuați și descărcați fișierele demo și să începem!
Rețineți că, în timp ce scrieți acest articol, Chrome (versiunea 23) acceptă hărți sursă JavaScript și chiar hărți SASS Source. Firefox ar trebui, de asemenea, să obțină sprijin în viitorul apropiat, deoarece este în prezent într-un stadiu activ de dezvoltare. Cu acest cuvânt de precauție din drum, să vedem acum cum putem profita de hărțile sursă în browser!
În primul rând, trebuie să activați asistența în Chrome utilizând următorii pași simpli:
Dacă doriți să lucrați împreună cu acest tutorial, descărcați demo-ul și deschideți directorul "start". Structura fișierelor și a directorilor este destul de elementară, cu un simplu JavaScript scripturi / script.js. Ar trebui să te poți deschide index.html și chiar adăugați unele nume de culori CSS sau valori hex pentru a modifica culoarea de fundal.
$ copac. ├─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ ─ stil.css └── stil.sass
Aruncați o privire prin fișierele simple de script în Javascript simplu, TypeScript sau CoffeeScript. Folosind diverse compilatoare JavaScript, vom crea o versiune gata de producție, precum și vom genera hărțile sursă corespunzătoare.
În secțiunile următoare, vom folosi cinci moduri diferite de a genera un compilat și minificat script.js, împreună cu harta sursă asociată. Puteți alege fie să testați toate opțiunile, fie pur și simplu să mergeți cu compilatorul pe care îl cunoașteți deja. Aceste opțiuni includ:
Closure Compiler, de la Google, este un instrument pentru optimizarea JavaScript. Aceasta face acest lucru prin analiza codului dvs., eliminarea biților irelevanți și apoi minimizarea restului. În plus, poate genera hărți sursă.
Să folosim următorii pași pentru a crea o versiune optimizată a script.js, folosind compilatorul de închidere:
Accentsconagua
compiler.jar, la director, script-uri.script-uri, din linia de comandă și executați următoarele, astfel încât să fie optimizat, pregătit pentru producție script.closure.js fișierul va fi creat: java -jar compiler.jar --js script.js --js_output_file script.closure.js
index.html este acum legată de fișierul nou creat, scripturi / script.closure.js, prin necomantarea opțiunii A.
Când ne deschidem index.html în browser și navigați la panoul sursă în instrumentele dezvoltatorului, numai versiunea optimizată a script.closure.js este menționat; nu avem nici o modalitate de a face o relație înapoi cu originalul nostru, în mod corespunzător indentat. Să creați în continuare fișierul hartă sursă executând următoarea comandă în script-uri director:
java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format = V3 --js_output_file script.closure.js
Observați că Closure Compiler are două opțiuni, --create_source_map și --source_map_format, pentru a crea un fișier hartă sursă, script.closure.js.map, cu versiunea sursă a hărții 3. Apoi, adăugați urlul sursei de mapare la sfârșitul fișierului de script compilat, script.closure.js, astfel încât fișierul optimizat să conțină informațiile despre locația sursei:
// @ sourceMappingURL = script.closure.js.map
Acum, când vizualizăm proiectul în browser, directorul "scripturi", în panoul sursă al instrumentelor pentru dezvoltatori, va afișa atât fișierul original, cât și versiunea optimizată, script.closure.js. Deși browserul utilizează, desigur, fișierul optimizat la care ne-am referit inițial index.html, hărțile sursă ne permit să creăm o conexiune la fișierul original.
De asemenea, încercați cu puncte de întrerupere pentru depanare, dar rețineți că expresiile de ceas și variabilele nu sunt încă disponibile cu hărțile sursă. Sperăm că vor fi în viitor!
Dacă utilizați deja Grunt.js pentru procesele de construire, atunci pluginul Grunt pentru hărțile sursă JSMin va fi util. Nu numai că vă va optimiza codul, dar va crea și harta sursă!
Următorii pași vor demonstra cum se creează o versiune optimizată a script.js cu pluginul Grunt JSMin:
grunt.js, în rădăcina directorului "start": $ npm instalare -g grunt $ npm vizualizare versiune grunt npm http GET https://registry.npmjs.org/grunt npm http 200 https://registry.npmjs.org/grunt 0.3.17 $ grunt init: gruntfile
node_modules / geamăt-JSMin-sourcemap va fi creat: $ npm instalează grunt-jsmin-sourcemap
grunt.js fișier pentru a conține numai JSMin-sourcemap sarcina - de a păstra lucrurile cât mai simple posibil. modul.exports = funcția (grunt) grunt.loadNpmTasks ('grunt-jsmin-sourcemap'); "scripts / script.jsmin-script.js", destMap: 'scripts / script.jsmin-sourcemap': all: src: grunt.js.map '); grunt.registerTask ("implicit", "jsmin-sourcemap"); ; mormăit; aceasta va executa sarcina jsmin-sourcemap, deoarece sarcina implicită este menționată ca atare în fișierul grunt.js: $ grunt Executarea sarcinii "jsmin-sourcemap: all" (jsmin-sourcemap) Efectuată, fără erori.
script.grunt-jsmin.js.map, asigurați-vă că sursa este "surse": [ "script.js"]. script.grunt-jsmin.js, în index.html, și se deschid în browser.Cu Grunt și plugin-ul, jsmin-sourcemap, procesul de construire a creat două fișiere: fișierul script optimizat cu urlul sursă de mapare în partea de jos, precum și o hartă sursă. Veți avea nevoie de amândouă pentru a le vedea în browser.
UglifyJS2 este un alt parser JavaScript, minfier și compresor. Similar cu cele două variante de mai sus, UglifyJS2 va crea un fișier script optimizat, atașat cu un url de cartografiere sursă, precum și un fișier hartă sursă care va conține maparea la fișierul original. Pentru a utiliza UglifyJS, executați următoarele în linia de comandă a directorului "start":
urâți-js, la nivel local; un director, numit nocde_module / sluți-js, va fi creat. $ npm instalare uglify-js $ npm vizualizare uglify-js versiune 2.2.3 $ cd scripts /
--Sursa hartă și --producție, pentru a numi fișierul de ieșire. uglifyjs - script-ul scriptului script.uglify.js.map --output script.uglify.js script.js
index.html este corelat corect cu scenariul, script.uglify.js 
Pentru cele trei opțiuni anterioare, am cerut doar o optimizare în un singur pas, de la codul original la JavaScript optimizat. Cu toate acestea, pentru limbi precum CoffeeScript, avem nevoie de un proces în două etape: CoffeeScript> JavaScript> JavaScript optimizat. În această secțiune, vom explora modul de creare a hărților sursă pe mai multe niveluri cu CoffeeScript și compilatorul CoffeeScript Redux.
Navigați la directorul "start" în linia de comandă. În următorii pași, vom mapa fișierul de script optimizat înapoi la CoffeeScript:
script.coffee.coffee, pentru a crea o versiune JavaScript simplă, utilizând următoarea comandă: $ coffee -c scripturi / script.coffee.coffee
$ git clone https://github.com/michaelficarra/CoffeeScriptRedux.git cafe-redux $ cd cafe-redux $ npm instalare $ make -j test $ cd ...
script.coffee.js.map, care va reține informațiile de cartografiere din JavaScript generat înapoi la fișierul CoffeeScript: $ cafea-redux / bin / cafea -source-map -i scripturi / script.coffee.coffee> script-uri / script.coffee.js.map
script.coffee.js, are URL-ul sursei de mapare chiar la sfârșit cu următoarea linie: // @ sourceMappingURL = script.coffee.js.map
script.coffee.js.map, are fișierul de referință corect ca "Fișier": "script.coffee.coffee", și fișierul sursă ca "surse": [ "script.coffee.coffee"] script-uri de $ cd / $ 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, are fișierul de referință corect ca "file": "script.coffee.min.js", și sursele corecte ca "surse": [ "script.coffee.coffee"].
Tipul de tip script, la fel ca și CoffeeScript, necesită, de asemenea, un proces în două etape: TypeScript> Plain JavaScript> Minified JavaScript. Deoarece scriptul folosește un plugin jQuery, avem nevoie de două fișiere TypeScript, care sunt deja furnizate: script.typescript.ts și jquery.d.ts.
Navigați la directorul "scripturi" din linia de comandă și executați următoarea comandă:
$ tsc script.typescript.ts -sourcemap
Comanda de mai sus va crea un nou fișier JavaScript, numit script.typescript.js, cu URL-ul sursei de mapare în partea de jos: // @ sourceMappingURL = script.typescript.js.map. Cu această singură comandă, va crea, de asemenea, fișierul hărții, script.typescript.js.map.
Ca și în cazul exemplului CoffeeScript, următorul pas este să utilizați UglifyJS.
$ uglifyjs script.typescript.js -o script.typescript.min.js - script-sursă-script script.typescript.min.js.map - în script-ul sursă-script-script.typescript.js.map
În cele din urmă, asigurați-vă că index.html link-uri către fișierul corect de script, scripturi / script.typescript.min.js, și deschideți-l în browser!
Dincolo de JavaScript, în prezent, Chrome acceptă și hărți sursă SASS sau SCSS. Pentru cartografiere sursă SASS, să modificăm câteva setări în Chrome, apoi să compilam SASS în CSS cu parametri de depanare:
@media -sass-debug-info care va avea informațiile despre numele fișierului și numărul liniei. $ cd stiluri / $ sass --debug-info - vizionează stil.sass: style.css
Dincolo de simpla vizualizare a fișierului SASS, dacă executați LiveReload în fundal și efectuați modificări în fișierul SASS, pagina va fi actualizată pentru a reflecta modificările. De exemplu, să deschidem proiectul în Firefox și să inspectăm pagina utilizând extensia Firebug.
Dacă vom vedea oricare dintre *.Hartă fișiere, va conține informațiile de cartografiere din fișierul original în fișierul optimizat. Structura unei hărți sursă este de obicei în format JSON, utilizând specificațiile Versiunii 3. Acesta va conține de obicei următoarele cinci proprietăți:
Sursa hărților se află încă foarte mult sub dezvoltare activă, dar, deja, există o mare cantitate de resurse disponibile pe web. Asigurați-vă că ați luat în considerare următoarele, dacă doriți să aflați mai multe.
Sper că procesul de deplasare de mai sus, folosind compilatoare multiple, a demonstrat potențialul hărților sursă. Deși funcționalitatea este în prezent limitată, sperăm că în viitor vom avea capacitatea completă de depanare, inclusiv accesul la variabile și expresii.
