Share
Nel flusso di lavoro moderno di oggi, il codice che produciamo nei nostri ambienti di sviluppo è notevolmente diverso dal codice di produzione, dopo averlo eseguito attraverso la compilazione, la minificazione, la concatenazione o vari altri processi di ottimizzazione.
È qui che entrano in gioco le mappe di origine, evidenziando la mappatura esatta nel nostro codice di produzione con il codice originale. In questo tutorial introduttivo, prenderemo un semplice progetto e lo eseguiremo attraverso vari compilatori JavaScript allo scopo di giocare con le mappe sorgente nel browser.
Le mappe sorgente offrono un modo agnostico per mappare il codice di produzione al codice originale che è stato creato.
Le mappe sorgente offrono un modo agnostico di mappare il codice di produzione al codice originale creato nel proprio ambiente di sviluppo. Quando guardiamo alla fine alla base di codice, generata e preparata per la produzione, diventa molto difficile individuare esattamente dove si trova la mappatura della linea al nostro codice originale. Tuttavia, durante la compilazione, una mappa sorgente memorizza queste informazioni, in modo che, quando si interroga una sezione di linea, restituisca la posizione esatta nel file originale a noi! Questo offre un enorme vantaggio per lo sviluppatore, in quanto il codice diventa quindi leggibile e persino debugabile!
In questo tutorial, utilizzeremo un codice JavaScript e SASS molto semplice, li eseguiremo attraverso vari compilatori e quindi visualizzeremo i nostri file originali nel browser con l'aiuto delle mappe di origine. Vai avanti e scarica i file demo e cominciamo!
Si noti che, durante la stesura di questo articolo, Chrome (versione 23) supporta JavaScript Source Maps e anche SASS Source Maps. Firefox dovrebbe anche ottenere supporto nel prossimo futuro, poiché è attualmente in una fase attiva di sviluppo. Con questa parola di cautela, vediamo ora come possiamo sfruttare le mappe di origine nel browser!
Innanzitutto, dobbiamo abilitare il supporto in Chrome, utilizzando i seguenti semplici passaggi:
Se desideri lavorare con questo tutorial, scarica la demo e apri la directory "start". La struttura dei file e delle directory è piuttosto semplice, con qualche semplice JavaScript in scripts / script.js. Dovresti essere in grado di aprire index.html e persino aggiungere alcuni nomi di colori CSS o valori esadecimali per modificare il colore di sfondo.
$ albero. ├── index.html ├── script │ ├── jquery.d.ts │ ├── script.coffee.coffee │ ├── script.js │ └── script.typescript.ts └── stili ├─ ─ style.css └── style.sass
Dai un'occhiata ai semplici file di script in plain JavaScript, TypeScript o CoffeeScript. Utilizzando vari compilatori JavaScript, creeremo una versione pronta per la produzione e genereremo le mappe sorgente corrispondenti.
Nelle sezioni seguenti, utilizzeremo cinque diversi modi per generare un compilato e un minisito script.js, insieme alla mappa sorgente associata. Puoi scegliere di testare tutte le opzioni, o semplicemente andare con il compilatore che conosci già. Queste opzioni includono:
Closure Compiler, di Google, è uno strumento per ottimizzare JavaScript. Lo fa analizzando il codice, rimuovendo i bit non pertinenti e quindi minimizzando il resto. Inoltre, può anche generare mappe sorgente.
Utilizziamo i seguenti passaggi per creare una versione ottimizzata di script.js, usando il compilatore Closure:
Accentsconagua
compiler.jar, nella directory, script.script, dalla riga di comando ed eseguire quanto segue, in modo che sia ottimizzato, pronto per la produzione script.closure.js il file verrà creato: java -jar compiler.jar --js script.js --js_output_file script.closure.js
index.html è ora collegato con il file appena creato, scripts / script.closure.js, da decommentare l'opzione A.
Quando apriamo index.html all'interno del browser e vai al pannello Sorgente negli strumenti di sviluppo, solo la versione ottimizzata di script.closure.js è referenziato; non abbiamo modo di riportare una relazione al nostro originale, opportunamente rientrata. Successivamente creiamo il file della mappa sorgente eseguendo il seguente comando nel file script directory:
java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format = V3 --js_output_file script.closure.js
Notare che Closure Compiler accetta due opzioni, --create_source_map e --source_map_format, per creare un file di mappa sorgente, script.closure.js.map, con la mappa di origine versione 3. Quindi, aggiungere l'url di mappaggio sorgente alla fine del file di script compilato, script.closure.js, in modo che il file ottimizzato contenga le informazioni sulla posizione della mappa di origine:
// @ sourceMappingURL = script.closure.js.map
Ora, quando visualizziamo il progetto nel browser, la directory "scripts", sotto il pannello Sorgente degli strumenti di sviluppo, mostrerà sia il file originale che la versione ottimizzata, script.closure.js. Sebbene il browser utilizzi naturalmente il file ottimizzato a cui originariamente facevamo riferimento index.html, le mappe di origine ci consentono di creare una connessione al file originale.
Inoltre, provalo con i breakpoint per il debug, ma tieni presente che le espressioni e le variabili di watch non sono ancora disponibili con le mappe sorgente. Speriamo che lo saranno in futuro!
Se usi già Grunt.js per i processi di compilazione, il plugin Grunt per le mappe di sorgenti JSMin ti tornerà utile. Non solo ottimizzerà il tuo codice, ma creerà anche la mappa sorgente!
I seguenti passaggi mostreranno come creare una versione ottimizzata di script.js con il plugin Grunt JSMin:
grunt.js, nella radice della directory "start": $ npm install -g grunt $ npm visualizza versione 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 / grugnito-JSMin-Sourcemap sarà creato: $ npm installa grunt-jsmin-sourcemap
grunt.js file per contenere solo il JSMin-Sourcemap compito - per mantenere le cose il più semplice possibile. module.exports = function (grunt) grunt.loadNpmTasks ('grunt-jsmin-sourcemap'); grunt.initConfig ('jsmin-sourcemap': all: src: ['scripts / script.js'], dest: 'scripts / script.jsmin-grunt.js', destMap: 'scripts / script.jsmin- grunt.js.map '); grunt.registerTask ('default', 'jsmin-sourcemap'); ; grugnito; questo eseguirà l'attività jsmin-sourcemap, poiché l'attività predefinita è dichiarata come tale all'interno del file grunt.js: $ grunt Esecuzione dell'attività "jsmin-sourcemap: all" (jsmin-sourcemap) Fatto, senza errori.
script.grunt-jsmin.js.map, assicurati che la fonte sia "fonti": [ ""] script.js. script.grunt-jsmin.js, entro index.html, e aprire nel browser.Con Grunt e il plugin, jsmin-sourcemap, il processo di compilazione ha creato due file: il file di script ottimizzato con l'url di mappatura di origine nella parte inferiore, oltre a una mappa di origine. Avrai bisogno di entrambi questi per vederli tutti nel browser.
UglifyJS2 è un altro parser JavaScript, minfier e compressore. Simile alle due alternative di cui sopra, UglifyJS2 creerà un file di script ottimizzato, aggiunto con un URL di mappatura dell'origine e un file di mappa di origine che conterrà il mapping al file originale. Per utilizzare UglifyJS, eseguire quanto segue nella riga di comando della directory "start":
uglify-js, a livello locale; una directory, chiamata nocde_module / uglify-js, sarà creato. $ npm install uglify-js $ npm visualizza uglify-js versione 2.2.3 $ cd scripts /
--fonte-map e --produzione, per dare un nome al file di output. uglifyjs --source-map script.uglify.js.map --output script.uglify.js script.js
index.html è correttamente collegato allo script, script.uglify.js 
Per le precedenti tre opzioni, abbiamo richiesto solo un'ottimizzazione in un'unica fase, dal codice originale al JavaScript ottimizzato. Tuttavia, per le lingue come CoffeeScript, abbiamo bisogno di un processo in due fasi: CoffeeScript> JavaScript> JavaScript ottimizzato. In questa sezione, esploreremo come creare mappe sorgente multilivello con CoffeeScript e il compilatore CoffeeScript Redux.
Passare alla directory, "start", nella riga di comando. Nei seguenti passaggi, mapperemo il file di script ottimizzato su CoffeeScript:
script.coffee.coffee, per creare una semplice versione JavaScript, utilizzando il seguente comando: $ caffè -c script / script.coffee.coffee
$ git clone https://github.com/michaelficarra/CoffeeScriptRedux.git coffee-redux $ cd coffee-redux $ npm installa $ make -j test $ cd ...
script.coffee.js.map, che manterrà le informazioni di mappatura dal JavaScript generato al file CoffeeScript: $ coffee-redux / bin / coffee --source-map -i script / script.coffee.coffee> script / script.coffee.js.map
script.coffee.js, ha l'url di mappatura sorgente proprio alla fine con la seguente riga: // @ sourceMappingURL = script.coffee.js.map
script.coffee.js.map, ha il file di riferimento corretto come "File": "script.coffee.coffee", e file sorgente come "fonti": [ ""] 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, ha il file di riferimento corretto come "file": "script.coffee.min.js", e le fonti corrette come "fonti": [ ""] script.coffee.coffee.
TypeScript, proprio come CoffeeScript, richiede anche un processo in due passaggi: TypeScript> Plain JavaScript> Minified JavaScript. Poiché lo script utilizza un plugin jQuery, abbiamo bisogno di due file TypeScript, che sono già forniti: script.typescript.ts e jquery.d.ts.
Passare alla directory "scripts" dalla riga di comando ed eseguire il seguente comando:
$ tsc script.typescript.ts -sourcemap
Il comando precedente creerà un nuovo file JavaScript, chiamato script.typescript.js, con l'url di mappatura sorgente in basso: // @ sourceMappingURL = script.typescript.js.map. Con questo singolo comando, creerà anche il file di mappa, script.typescript.js.map.
Come con l'esempio di CoffeeScript, il passo successivo è usare UglifyJS.
$ uglifyjs script.typescript.js -o script.typescript.min.js --source-map script.typescript.min.js.map --in-source-map script.typescript.js.map
Infine, assicurati che index.html collegamenti al file di script corretto, scripts / script.typescript.min.js, e aprilo nel browser!
Al di là di JavaScript, al momento, Chrome supporta anche mappe sorgente SASS o SCSS. Per la mappatura delle sorgenti SASS, modifichiamo alcune impostazioni in Chrome, quindi compili SASS in CSS con i parametri di debug:
@media -sass-debug-info che avrà le informazioni sul nome file e il numero di riga. $ cd stili / $ sass --debug-info --watch style.sass: style.css
Oltre a visualizzare semplicemente il file SASS, se si esegue LiveReload in background e si apportano modifiche al file SASS, la pagina verrà aggiornata anche per riflettere le modifiche. Ad esempio, apriamo il progetto in Firefox e ispezioniamo la pagina, usando l'estensione Firebug.
Se vediamo uno qualsiasi dei *.carta geografica file, conterrà le informazioni di mappatura dal file originale al file ottimizzato. La struttura di una mappa di origine è in genere nel formato JSON, utilizzando le specifiche della Versione 3. Di solito contiene le seguenti cinque proprietà:
Le mappe di origine sono ancora in fase di sviluppo attivo, ma, già, ci sono alcune grandi risorse disponibili sul web. Assicurati di considerare quanto segue, se desideri saperne di più.
Spero che il precedente walk-through, utilizzando più compilatori, abbia dimostrato il potenziale delle mappe sorgente. Sebbene la funzionalità al momento sia limitata, si spera, in futuro, avremo funzionalità di debug completo, incluso l'accesso a variabili ed espressioni.
