Share
In de hedendaagse moderne workflow verschilt de code die we in onze ontwikkelomgevingen schrijven aanzienlijk van de productiecode, nadat deze is uitgevoerd via compilatie, minificatie, aaneenschakeling of verschillende andere optimalisatieprocessen..
Dit is waar bronkaarten in het spel komen, door te wijzen op de exacte toewijzing in onze productiecode aan de originele geschreven code. In deze inleidende zelfstudie nemen we een eenvoudig project en voeren we het door verschillende JavaScript-compilers voor het spelen met bronkaarten in de browser..
Bronkaarten bieden een taal-agnostische manier om productiecode toe te wijzen aan de originele code die is geschreven.
Bronkaarten bieden een taal-agnostische manier om productiecode toe te wijzen aan de originele code die is geschreven in uw ontwikkelomgeving. Wanneer we uiteindelijk kijken naar de codebasis, gegenereerd en voorbereid voor productie, wordt het een hele uitdaging om precies te weten waar de lijntoewijzing naar onze oorspronkelijke geschreven code zich bevindt. Tijdens de compilatie slaat een bronkaart deze informatie echter op, zodat wanneer we een lijnsectie bevragen, deze de exacte locatie in het oorspronkelijke bestand aan ons zal retourneren! Dit biedt een enorm voordeel voor de ontwikkelaar, omdat de code dan leesbaar en zelfs debuggabel wordt!
In deze zelfstudie nemen we een heel eenvoudig stukje JavaScript- en SASS-code, leiden ze door verschillende compilers en bekijken we onze oorspronkelijke bestanden in de browser met behulp van bronkaarten. Ga je gang en download de demo-bestanden en laten we aan de slag gaan!
Houd er rekening mee dat Chrome (versie 23) bij het schrijven van dit artikel JavaScript-bronkaarten en zelfs SASS-bronkaarten ondersteunt. Firefox zou ook in de nabije toekomst ondersteuning moeten krijgen, omdat het zich momenteel in een actieve ontwikkelingsfase bevindt. Met dat woord van waarschuwing uit de weg, laten we nu zien hoe we kunnen profiteren van bronkaarten in de browser!
Ten eerste moeten we ondersteuning in Chrome inschakelen met behulp van de volgende eenvoudige stappen:
Als je met deze tutorial wilt werken, download dan de demo en open de "start" -directory. De bestanden en mappenstructuur is vrij eenvoudig, met enkele eenvoudige JavaScript-daarin scripts / script.js. Je zou moeten kunnen openen index.html en voeg zelfs een aantal CSS-kleurnamen of hex-waarden toe om de achtergrondkleur aan te passen.
$ boom. ├── index.html ├── scripts │ ├── jquery.d.ts │ ├── script.coffee.coffee │ ├── script.js │ └── script.typescript.ts └── stijlen ├─ ─ style.css └── style.sass
Bekijk de eenvoudige scriptbestanden in gewoon JavaScript, TypeScript of CoffeeScript. Met behulp van verschillende JavaScript-compilers maken we een productierijpelende versie en genereren we de bijbehorende bronkaarten.
In de volgende secties gebruiken we vijf verschillende manieren om een gecompileerde en verkleinde manier te genereren script.js, samen met de bijbehorende bronkaart. U kunt kiezen om alle opties uit te proberen, of gewoon met de compiler gaan waarmee u al vertrouwd bent. Deze opties omvatten:
Closure Compiler, door Google, is een hulpmiddel voor het optimaliseren van JavaScript. Dit doet het door uw code te analyseren, irrelevante bits te verwijderen en de rest te verkleinen. Bovendien kan het ook bronkaarten genereren.
Laten we de volgende stappen gebruiken om een geoptimaliseerde versie van te maken script.js, met de compilatie van de afsluiting:
Accentsconagua
compiler.jar, naar de map, scripts.scripts, vanaf de opdrachtregel en voer het volgende uit, zodat een geoptimaliseerd productiegereed is script.closure.js bestand wordt aangemaakt: java -jar compiler.jar --js script.js --js_output_file script.closure.js
index.html is nu gekoppeld aan het nieuw gemaakte bestand, scripts / script.closure.js, door Option A te uncommenteren.
Wanneer we openen index.html in de browser en ga naar het Bronpaneel in de ontwikkelaarstools, alleen de geoptimaliseerde versie van script.closure.js wordt verwezen; we hebben geen mogelijkheid om een relatie terug te brengen naar onze originele, goed ingesprongen. Laten we vervolgens het bronkaartbestand maken door de volgende opdracht in de scripts 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
Merk op dat Closure Compiler twee opties biedt, --create_source_map en --source_map_format, om een bronkaartbestand te maken, script.closure.js.map, met bronkaartversie 3. Voeg vervolgens de URL van de bronkarakterisatie toe aan het einde van het gecompileerde scriptbestand, script.closure.js, zodat het geoptimaliseerde bestand de locatiegegevens van de bronkaart bevat:
// @ sourceMappingURL = script.closure.js.map
Wanneer we nu het project in de browser bekijken, toont de map "scripts" onder het bronvenster van de ontwikkelaarshulpprogramma's zowel het originele bestand als de geoptimaliseerde versie, script.closure.js. Hoewel de browser natuurlijk het geoptimaliseerde bestand gebruikt waarnaar we oorspronkelijk hebben verwezen index.html, Met bronkaarten kunnen we een verbinding met het oorspronkelijke bestand maken.
Probeer het ook uit met breekpunten voor foutopsporing, maar houd er rekening mee dat weergaveuitdrukkingen en variabelen nog niet beschikbaar zijn met bronkaarten. Hopelijk zullen ze in de toekomst zijn!
Als je Grunt.js al gebruikt voor build-processen, dan is de Grunt-plug-in voor JSMin-bronkaarten handig. Niet alleen zal het uw code optimaliseren, maar het zal ook de bronkaart maken!
De volgende stappen zullen laten zien hoe u een geoptimaliseerde versie van kunt maken script.js met de Grunt JSMin-plug-in:
grunt.js, in de hoofdmap van de map "start": $ npm installatie -g grunt $ npm bekijk grunt-versie 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 zal gemaakt worden: $ npm installeer grunt-jsmin-sourcemap
grunt.js bestand om alleen de JSMin-sourcemap taak - om dingen zo eenvoudig mogelijk te houden. module.exports = functie (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 ('standaard', 'jsmin-sourcemap'); ; knorren; hiermee wordt de jsmin-sourcemap-taak uitgevoerd, aangezien de standaardtaak als zodanig wordt vermeld in het bestand grunt.js: $ grunt Running "jsmin-sourcemap: all" (jsmin-sourcemap) task Klaar, zonder fouten.
script.grunt-jsmin.js.map, zorg ervoor dat de bron is "Bronnen": [ "script.js"]. script.grunt-jsmin.js, binnen index.html, en open in de browser.Met Grunt en de plug-in, jsmin-sourcemap, creëerde het bouwproces twee bestanden: het geoptimaliseerde scriptbestand met de source mapping url onderaan, evenals een bronkaart. U hebt beide nodig om ze allemaal in de browser te bekijken.
UglifyJS2 is een andere JavaScript-parser, minfier en compressor. Net als bij de twee bovenstaande alternatieven, zal UglifyJS2 een geoptimaliseerd scriptbestand maken, toegevoegd met een url voor bronafstemming, evenals een bronmapbestand dat de toewijzing aan het oorspronkelijke bestand bevat. Om UglifyJS te gebruiken, voert u het volgende uit in de opdrachtregel van de "start" map:
verlelijken-js, lokaal; een directory, genaamd nocde_module / verlelijken-js, zal gemaakt worden. $ npm installeer uglify-js $ npm bekijk uglify-js versie 2.2.3 $ cd scripts /
--source-map en --uitgang, om het uitvoerbestand een naam te geven. uglifyjs --bronmap script.uglify.js.map --output script.uglify.js script.js
index.html is correct gekoppeld aan het script, script.uglify.js 
Voor de vorige drie opties hadden we alleen een optimalisatie in één stap nodig, van de originele code tot het geoptimaliseerde JavaScript. Voor talen als CoffeeScript hebben we echter een proces in twee stappen nodig: CoffeeScript> JavaScript> geoptimaliseerd JavaScript. In deze sectie zullen we onderzoeken hoe bronkaarten op meerdere niveaus kunnen worden gemaakt met CoffeeScript en de RedScript-compiler van CoffeeScript.
Navigeer naar de directory "start" in de opdrachtregel. In de volgende stappen zullen we het geoptimaliseerde scriptbestand toewijzen aan de CoffeeScript:
script.coffee.coffee, om een eenvoudige JavaScript-versie te maken met behulp van de volgende opdracht: $ coffee -c scripts / script.coffee.coffee
$ git clone https://github.com/michaelficarra/CoffeeScriptRedux.git coffee-redux $ cd coffee-redux $ npm install $ make -j test $ cd ...
script.coffee.js.map, die de kaartinformatie van de gegenereerde JavaScript terug naar het CoffeeScript-bestand zal bevatten: $ coffee-redux / bin / coffee - resource-map -i scripts / script.coffee.coffee> scripts / script.coffee.js.map
script.coffee.js, heeft de source mapping url aan het eind met de volgende regel: // @ sourceMappingURL = script.coffee.js.map
script.coffee.js.map, heeft het juiste referentiebestand als "File": "script.coffee.coffee", en bronbestand als "Bronnen": [ "script.coffee.coffee"] $ cd scripts / $ uglifyjs script.coffee.js -o script.coffee.min.js - resource map map.coffee.min.js.map --in-source-map script.coffee.js.map
script.coffee.min.js.map, heeft het juiste referentiebestand als "File": "script.coffee.min.js", en de juiste bronnen als "Bronnen": [ "script.coffee.coffee"].
TypeScript heeft net als CoffeeScript ook een proces in twee stappen nodig: TypeScript> Normaal JavaScript> JavaScript verkleind. Omdat het script een jQuery-plug-in gebruikt, hebben we twee TypeScript-bestanden nodig die al zijn geleverd: script.typescript.ts en jquery.d.ts.
Navigeer naar de map "scripts" vanaf de opdrachtregel en voer de volgende opdracht uit:
$ tsc script.typescript.ts -sourcemap
Met de opdracht hierboven wordt een nieuw JavaScript-bestand gemaakt, genaamd script.typescript.js, met de source mapping url onderaan: // @ sourceMappingURL = script.typescript.js.map. Met deze enkele opdracht wordt ook het kaartbestand gemaakt, script.typescript.js.map.
Net als bij het voorbeeld in CoffeeScript is de volgende stap het gebruik van UglifyJS.
$ uglifyjs script.typescript.js -o script.typescript.min.js --source-map script.typescript.min.js.map --in-source-map script.typescript.js.map
Tot slot, zorg ervoor dat index.html links naar het juiste scriptbestand, scripts / script.typescript.min.js, en open het in de browser!
Behalve JavaScript ondersteunt Chrome momenteel ook SASS- of SCSS-bronmaps. Laten we voor SASS-brontoewijzing enkele instellingen in Chrome wijzigen en vervolgens SASS naar CSS compileren met foutopsporingsparameters:
@media -sass-debug-info die de informatie over de bestandsnaam en het regelnummer zal hebben. $ cd styles / $ sass --debug-info --watch style.sass: style.css
Naast het eenvoudig bekijken van het SASS-bestand, als u LiveReload op de achtergrond uitvoert en wijzigingen aanbrengt in het SASS-bestand, wordt de pagina ook bijgewerkt om de wijzigingen weer te geven. Stel bijvoorbeeld het project in Firefox open en inspecteer de pagina met de Firebug-extensie.
Als we een van de bekijken *.kaart bestanden, bevat deze de kaartinformatie van het originele bestand naar het geoptimaliseerde bestand. De structuur van een bronkaart is meestal in het JSON-formaat, met behulp van de specificaties van versie 3. Het bevat meestal de volgende vijf eigenschappen:
Bronkaarten worden nog steeds erg actief ontwikkeld, maar er zijn al enkele geweldige bronnen beschikbaar op internet. Overweeg het volgende als u meer wilt weten.
Ik hoop dat het bovenstaande doorlopen, met behulp van meerdere compilers, het potentieel van bronkaarten heeft aangetoond. Hoewel de functionaliteit momenteel beperkt is, hebben we hopelijk in de toekomst volledige mogelijkheden voor foutopsporing, inclusief toegang tot variabelen en expressies.
