Share
Dans le flux de travail moderne d'aujourd'hui, le code que nous créons dans nos environnements de développement est considérablement différent du code de production, après l'avoir exécuté via la compilation, la minimisation, la concaténation ou divers autres processus d'optimisation..
C’est là que les cartes sources entrent en jeu, en indiquant la correspondance exacte de notre code de production avec le code créé par l’auteur. Dans ce tutoriel d'introduction, nous allons prendre un projet simple et l'exécuter à travers différents compilateurs JavaScript afin de jouer avec les cartes sources dans le navigateur..
Les cartes source offrent un moyen indépendant de la langue de mapper le code de production avec le code original créé.
Les cartes source offrent un moyen, indépendant de la langue, de mapper le code de production sur le code d'origine créé dans votre environnement de développement. Lorsque nous examinons finalement la base de code, générée et préparée pour la production, il devient très difficile de localiser exactement où se trouve la correspondance de ligne avec notre code créé à l'origine. Cependant, lors de la compilation, une carte source stocke ces informations. Ainsi, lorsque nous interrogons une section de ligne, elle nous renvoie l'emplacement exact dans le fichier d'origine! Cela offre un énorme avantage au développeur, car le code devient alors lisible - et même débogué.!
Dans ce didacticiel, nous allons prendre un morceau très simple de code JavaScript et SASS, les exécuter à travers différents compilateurs, puis afficher nos fichiers d'origine dans le navigateur à l'aide de cartes source. Allez-y et téléchargez les fichiers de démonstration et commençons!
Notez que lors de la rédaction de cet article, Chrome (version 23) prend en charge les cartes source JavaScript et même les cartes source SASS. Firefox devrait également bénéficier d'une assistance dans un avenir proche, car il est actuellement à un stade de développement actif. Maintenant que nous avons mis en garde la prudence, voyons comment tirer parti des cartes sources dans le navigateur.!
Tout d'abord, nous devons activer le support dans Chrome en suivant les étapes simples suivantes:
Si vous souhaitez utiliser ce didacticiel, téléchargez la démo et ouvrez le répertoire "démarrer". La structure des fichiers et des répertoires est assez basique, avec quelques scripts JavaScript simples. scripts / script.js. Vous devriez pouvoir ouvrir index.html et même ajouter des noms de couleurs CSS ou des valeurs hexadécimales pour modifier la couleur de fond.
$ arbre. ├── index.html ├── scripts jquery.d.ts ├── script.coffee.coffee script.js script.typescript.ts styles ─ style.css └── style.sass
Jetez un coup d'œil aux fichiers de script simples en JavaScript, en TypeScript ou en CoffeeScript. À l'aide de divers compilateurs JavaScript, nous allons créer une version prête pour la production et générer les cartes sources correspondantes..
Dans les sections suivantes, nous utiliserons cinq manières différentes de générer un fichier compilé et minifié. script.js, avec la carte source associée. Vous pouvez soit choisir de tester toutes les options, soit simplement utiliser le compilateur que vous connaissez déjà. Ces options comprennent:
Closure Compiler, de Google, est un outil d’optimisation de JavaScript. Pour ce faire, il analyse votre code, supprime les bits non pertinents, puis réduit au minimum le reste. En plus de cela, il peut également générer des cartes source.
Utilisons les étapes suivantes pour créer une version optimisée de script.js, en utilisant le compilateur Closure:
Accentsconagua
compiler.jar, à l'annuaire, des scripts.des scripts, à partir de la ligne de commande et exécutez les opérations suivantes, de sorte qu’une version optimisée prête pour la production script.closure.js le fichier sera créé: java -jar compiler.jar --js script.js --js_output_file script.closure.js
index.html est maintenant lié au fichier nouvellement créé, scripts / script.closure.js, en décommentant l'option A.
Quand on ouvre index.html dans le navigateur et accédez au panneau Source dans les outils de développement, seule la version optimisée de script.closure.js est référencé; nous n'avons aucun moyen de faire une relation avec notre origine, correctement mise en retrait. Créons ensuite le fichier de carte source en exécutant la commande suivante dans le dossier des scripts annuaire:
java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format = V3 --js_output_file script.closure.js
Notez que Closure Compiler prend deux options, --create_source_map et --source_map_format, créer un fichier de carte source, script.closure.js.map, avec la carte source version 3. Ensuite, ajoutez l'URL de mappage source à la fin du fichier de script compilé, script.closure.js, afin que le fichier optimisé contienne les informations d'emplacement de la carte source:
// @ sourceMappingURL = script.closure.js.map
Maintenant, lorsque nous visualisons le projet dans le navigateur, le répertoire "scripts", sous le panneau Source des outils de développement, affiche à la fois le fichier d'origine et la version optimisée., script.closure.js. Bien que le navigateur utilise bien entendu le fichier optimisé que nous avons initialement référencé dans index.html, les cartes sources nous permettent de créer une connexion au fichier d'origine.
Essayez également avec des points d'arrêt pour le débogage, mais gardez à l'esprit que les expressions de contrôle et les variables ne sont pas encore disponibles avec les mappes source. Espérons qu'ils le seront dans le futur!
Si vous utilisez déjà Grunt.js pour les processus de construction, le plug-in Grunt pour les cartes source JSMin vous sera utile. Non seulement cela optimisera votre code, mais cela créera également la carte source.!
Les étapes suivantes montrent comment créer une version optimisée de script.js avec le plugin Grunt JSMin:
grunt.js, dans la racine du répertoire "start": $ npm install -g grunt $ npm voir la version grunt npm http GET https://registry.npmjs.org/grunt npm http 200 https://registry.npmjs.org/grunt 0.3.17 $ init. grunt: gruntfile
node_modules / grunt-jsmin-sourcemap sera créé: $ npm installer grunt-jsmin-sourcemap
grunt.js fichier ne contenant que le jsmin-sourcemap tâche - garder les choses aussi simples que possible. 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'); ; grognement; cela exécutera la tâche jsmin-sourcemap, car la tâche par défaut est indiquée comme telle dans le fichier grunt.js: $ grunt Exécution de la tâche "jsmin-sourcemap: all" (jsmin-sourcemap) Fait, sans erreur.
script.grunt-jsmin.js.map, s'assurer que la source est "sources": ["script.js"]. script.grunt-jsmin.js, dans index.html, et ouvrir dans le navigateur.Avec Grunt et le plug-in, jsmin-sourcemap, le processus de construction a créé deux fichiers: le fichier de script optimisé avec l'URL de mappage source au bas, ainsi qu'un mappage source. Vous aurez besoin de ces deux éléments pour pouvoir tous les visualiser dans le navigateur..
UglifyJS2 est un autre analyseur, minfieur et compresseur JavaScript. Comme pour les deux alternatives ci-dessus, UglifyJS2 créera un fichier de script optimisé, auquel sera ajoutée une URL de mappage source, ainsi qu'un fichier de carte source contenant le mappage vers le fichier d'origine. Pour utiliser UglifyJS, exécutez la commande suivante dans la ligne de commande du répertoire "start":
uglify-js, localement; un répertoire, appelé nocde_module / uglify-js, sera créé. $ npm installer uglify-js $ npm voir uglify-js version 2.2.3 $ cd scripts /
--carte source et --sortie, nommer le fichier de sortie. uglifyjs --source-map script.uglify.js.map --output script.uglify.js script.js
index.html est correctement lié au script, script.uglify.js 
Pour les trois options précédentes, nous n’avions besoin que d’une optimisation en une étape, du code original au JavaScript optimisé. Cependant, pour des langages tels que CoffeeScript, nous avons besoin d’un processus en deux étapes: CoffeeScript> JavaScript> JavaScript optimisé. Dans cette section, nous verrons comment créer des cartes source multiniveaux avec CoffeeScript et le compilateur CoffeeScript Redux..
Accédez au répertoire "start" dans la ligne de commande. Dans les étapes suivantes, nous allons mapper le fichier de script optimisé sur le CoffeeScript:
script.café.café, pour créer une version JavaScript simple, à l’aide de la commande suivante: $ coffee -c scripts / script.coffee.coffee
$ git clone https://github.com/michaelficarra/CoffeeScriptRedux.git coffee-redux $ cd coffee-redux $ npm installer $ make -j tester $ cd…
script.coffee.js.map, qui contiendra les informations de mappage du JavaScript généré dans le fichier CoffeeScript: $ coffee-redux / bin / coffee --source-map -i scripts / script.coffee.coffee> scripts / script.coffee.js.map
script.coffee.js, l'URL de mappage source se trouve juste à la fin avec la ligne suivante: // @ sourceMappingURL = script.coffee.js.map
script.coffee.js.map, a le fichier de référence correct comme "fichier": "script.coffee.coffee", et le fichier source en tant que "sources": ["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, a le fichier de référence correct comme "fichier": "script.coffee.min.js", et les sources correctes "sources": ["script.coffee.coffee"].
Tout comme CoffeeScript, TypeScript nécessite également un processus en deux étapes: TypeScript> Plain JavaScript> JavaScript modifié. Comme le script utilise un plugin jQuery, nous avons besoin de deux fichiers TypeScript déjà fournis: script.typescript.ts et jquery.d.ts.
Accédez au répertoire "scripts" à partir de la ligne de commande et exécutez la commande suivante:
$ tsc script.typescript.ts -sourcemap
La commande ci-dessus créera un nouveau fichier JavaScript, appelé script.typescript.js, avec l'URL de mappage source en bas: // @ sourceMappingURL = script.typescript.js.map. Avec cette commande unique, il créera également le fichier map, script.typescript.js.map.
Comme dans l'exemple CoffeeScript, l'étape suivante consiste à utiliser UglifyJS..
$ uglifyjs script.typescript.js -o script.typescript.min.js --source-map script.typescript.min.js.map --in-source-map script.typescript.js.map
Enfin, assurez-vous que index.html liens vers le fichier de script correct, scripts / script.typescript.min.js, et l'ouvrir dans le navigateur!
Au-delà de JavaScript, actuellement, Chrome prend également en charge les cartes sources SASS ou SCSS. Pour le mappage de source SASS, modifions quelques paramètres dans Chrome, puis compilons SASS en CSS avec les paramètres de débogage:
@media -sass-debug-info qui aura l'information sur le nom de fichier et le numéro de ligne. $ cd styles / $ sass --debug-info --watch style.sass: style.css
Au-delà de la simple visualisation du fichier SASS, si vous exécutez LiveReload en arrière-plan et apportez des modifications au fichier SASS, la page sera également mise à jour pour refléter les modifications. Par exemple, ouvrons le projet dans Firefox et inspectons la page à l’aide de l’extension Firebug..
Si nous voyons l'un des *.carte fichiers, il contiendra les informations de mappage du fichier d'origine sur le fichier optimisé. La structure d'une carte source est généralement au format JSON, à l'aide des spécifications de la version 3. Il contiendra généralement les cinq propriétés suivantes:
Les cartes sources sont encore en cours de développement, mais d’ores et déjà, d’excellentes ressources sont disponibles sur le Web. Assurez-vous de tenir compte de ce qui suit si vous souhaitez en savoir plus..
J'espère que la procédure ci-dessus, utilisant plusieurs compilateurs, a démontré le potentiel des cartes sources. Bien que les fonctionnalités soient actuellement limitées, nous espérons qu’à l’avenir nous aurons une capacité de débogage complète, y compris l’accès aux variables et aux expressions..
