Fichiers Javascript .map - Cartes source javascript

358

Récemment, j'ai vu des fichiers avec une .js.mapextension livrés avec certaines bibliothèques JavaScript (comme Angular ), et cela vient de soulever quelques questions dans ma tête:

  • Pourquoi est-ce? Pourquoi les gars d'Angular s'occupent-ils de livrer un .js.mapdossier?
  • Comment puis-je (en tant que développeur JavaScript) utiliser le angular.min.js.mapfichier?
  • Dois-je me soucier de créer des .js.mapfichiers pour mes applications JavaScript?
  • Comment est-il créé? J'ai jeté un coup d'œil angular.min.js.mapet il était rempli de chaînes au format étrange, donc je suppose qu'il n'est pas créé manuellement.
javascript angularjs source-maps Muhammad Reda
la source
1
html5rocks.com/en/tutorials/developertools/sourcemaps
Anand

Réponses:

552

Les .mapfichiers sont pour jset css(et maintenant tsaussi) les fichiers qui ont été minifiés. Ils sont appelés SourceMaps. Lorsque vous réduisez un fichier, comme le fichier angular.js, cela prend des milliers de lignes de joli code et le transforme en seulement quelques lignes de code laid. Avec un peu de chance, lorsque vous expédiez votre code en production, vous utilisez le code minifié au lieu de la version complète non minifiée. Lorsque votre application est en production et présente une erreur, le sourcemap vous aidera à prendre votre vilain fichier et vous permettra de voir la version originale du code. Si vous n'aviez pas le sourcemap, toute erreur semblerait au mieux cryptée.

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

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

  • Pourquoi est-ce? Pour dé-référencer le code uglifié
  • Comment un développeur peut-il l'utiliser? Vous l'utilisez pour déboguer une application de production. En mode développement, vous pouvez utiliser la version complète d'Angular. En production, vous utiliseriez la version minifiée.
  • Dois-je me soucier de créer un fichier js.map? Si vous souhaitez pouvoir déboguer plus facilement le code de production, alors oui, vous devriez le faire.
  • Comment est-il créé? Il est créé au moment de la construction. Il existe des outils de génération qui peuvent créer votre fichier .map pour vous comme il le fait pour d'autres fichiers. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

J'espère que cela a du sens.

glacial
la source
20
notez que le fichier de carte ne sera pas envoyé jusqu'à ce que vous l'appeliez, c'est ce qui m'a rendu confus stackoverflow.com/a/27196201/861487
Abdelouahab
2
Merci aaron, c'est l'une des meilleures descriptions que j'ai vues pour sourcemap. Je l'utilise dans gulp et j'avais presque tout appris sur gulp et je me demandais exactement comment les cartes sources étaient utilisées, maintenant je peux me sentir en confiance en l'utilisant. La plupart des plugins gulp sont désormais compatibles, contrairement à il y a un an alors que certains ne l'étaient pas. Je voulais juste dire que cela avait un sens total!
Eric Bishard
@frosty Pour dé-référencer le code uglifié . Pouvez-vous expliquer cela s'il vous plaît? Un .js.mapfichier ne maintient- il pas une relation (souvent appelée référence ) entre un fichier fabriqué à la main et un fichier minifié?
Mohammed Zameer
1
@student, il dit de dé-référence parce que je ne veux pas faire référence au code minifié. Il est minifié et si je le regarde, il est presque sans valeur. Mais, s'il pouvait le renvoyer à la source d'origine, ce serait épique. Et c'est exactement ce qu'est un sourcemap. J'espère que ça aide.
2016 glacial
J'adore cette réponse (merci), mais elle contient 420 likes ... est-ce que je la casse?
Eric Reed
33

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 sources.

  1. Grunt : utiliser un plugingrunt-contrib-uglify
  2. Gulp : utiliser le plugingulp-uglify
  3. Fermeture de Google : utilisation d'un paramètre--create_source_map
Muhammad Reda
la source
31
  • Comment un développeur peut-il l'utiliser?

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

  1. Ne liez pas votre fichier js.map dans votre fichier index.html (pas besoin de ça)

  2. Les outils de minifiacation (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 les outils de développement , accédez à l' onglet Sources , vous verrez le dossier sources , où les fichiers d'applications non minifiés sont conservés.
garfunkel61
la source
14

Le fichier de mappage mappe le fichier non réduit au fichier réduit. Si vous apportez des modifications dans le fichier non réduit, les modifications seront automatiquement répercutées sur la version réduite du fichier.

Surendra Yadav
la source
2

Juste pour ajouter à la façon d'utiliser les fichiers de carte. J'utilise Chrome pour Ubuntu et si je vais aux sources et que je clique sur un fichier, s'il y a un fichier de carte, un message apparaît me disant que je peux voir le fichier d'origine et comment le faire.

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

Ctrl-P et une liste des fichiers originaux apparaît dans une petite fenêtre.

Je peux ensuite parcourir la liste pour voir le fichier que j'aimerais inspecter et vérifier où le problème pourrait être.

rotato poti
la source