web-dev-qa-db-fra.com

Fichiers Javascript .map - cartes sources javascript

Récemment, j’ai vu des fichiers avec l’extension .js.map livrés avec certaines bibliothèques JavaScript (comme Angular ), et cela ne faisait que me poser quelques questions:

  • Pourquoi est-ce? Pourquoi les gars de Angular veillent-ils à créer un fichier .js.map?
  • Comment puis-je (en tant que développeur JavaScript) utiliser le fichier angular.min.js.map?
  • Devrais-je me préoccuper de la création de fichiers .js.map pour mes applications JavaScript?
  • Comment est-il créé? J'ai jeté un œil à angular.min.js.map et il était rempli de chaînes au format étrange, donc je suppose qu'il n'a pas été créé manuellement.
javascriptangularjssource-maps
310
Muhammad Reda

Les fichiers .map sont destinés aux fichiers js et css (et maintenant ts également) qui ont été minifiés. Ils s'appellent SourceMaps. Lorsque vous réduisez un fichier, comme le fichier angular.js, il prend des milliers de lignes de joli code et ne le transforme qu'en quelques lignes de code laid. Heureusement, lorsque vous expédiez votre code en production, vous utilisez le code minifié au lieu de la version complète et non modifiée. Lorsque votre application est en production et présente une erreur, le plan source vous aidera à récupérer votre fichier laide et vous permettra de voir la version originale du code. Si vous n'aviez pas le plan source, alors toute erreur semblerait au mieux cryptique.

Même chose pour les fichiers CSS. Une fois que vous prenez un fichier SASS ou LESS et le compilez en CSS, il ne ressemble en rien à sa forme originale. Si vous activez sourcemaps, vous pouvez voir l'état d'origine du fichier au lieu de l'état modifié.

Alors, pour répondre à vos questions dans l'ordre:

  • À quoi ça sert? Pour déréférencer le code uglified
  • Comment un développeur peut-il l'utiliser? Vous l'utilisez pour déboguer une application de production. En mode de développement, vous pouvez utiliser la version complète de Angular. En production, vous utiliseriez la version réduite.
  • Est-ce que je dois créer un fichier js.map? Si vous voulez pouvoir déboguer plus facilement le code de production, alors vous devriez le faire.
  • Comment est-il créé? Il est créé au moment de la construction. Il existe des outils de construction qui peuvent créer votre fichier .map comme vous le feriez pour d'autres fichiers. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

J'espère que cela a du sens.

464
frosty

Je voulais juste me concentrer sur la dernière partie de la question; Comment les fichiers de carte source sont-ils créés? en listant les outils de construction que je connais qui peuvent créer des cartes source.

  1. Grunt : utilisation du plugin grunt-contrib-uglify
  2. Gulp : utilisation du plugin gulp-uglify
  3. fermeture de Google : utilisation du paramètre --create_source_map

Je ne sais pas s'il existe d'autres outils pouvant créer des cartes sources.

27
Muhammad Reda
  • Comment un développeur peut-il l'utiliser?

Je n'ai pas trouvé de réponse à cela dans les commentaires, voici comment utiliser:

  1. ne pas lier votre fichier js.map dans votre fichier index.html (inutile de le faire)

  2. Les outils de minifiacation (les bons) ajoutent un commentaire à votre fichier . Min.js:

    // # sourceMappingURL = yourFileName.min.js.map

qui connectera votre fichier . map.

Lorsque les fichiers min.js et js.map sont prêts ...

  1. Chrome: Ouvrez le dossier dev-tools, accédez au dossier Sources, vous verrez le dossier sources, où sont conservés les fichiers d’applications non réduites.
24
garfunkel61

Le fichier de carte mappe le fichier non minié sur le fichier minifié. Si vous apportez des modifications dans le fichier non modifié, les modifications seront automatiquement répercutées sur la version modifiée du fichier.

13
Surendra Yadav

Juste pour ajouter à la façon d'utiliser les fichiers de carte. J'utilise chrome pour Ubuntu et si je vais dans les sources et que je clique sur un fichier, s'il y a un fichier de carte, un message m'indique que je peux voir le fichier d'origine et comment le faire.

Pour les fichiers Angular avec lesquels j'ai travaillé aujourd'hui, je clique sur

Ctrl-P et une liste des fichiers originaux apparaissent dans une petite fenêtre.

Je peux ensuite parcourir la liste pour afficher le fichier que je souhaite inspecter et vérifier où peut se trouver le problème.

2
rotato poti