544 votes

Comment puis-je utiliser les cartes sources JavaScript (fichiers .map) ?

Récemment, j'ai vu des dossiers avec le .js.map livrée avec certaines bibliothèques JavaScript (comme Angulaire ), et cela a soulevé quelques questions dans ma tête :

  • A quoi cela sert-il ? Pourquoi les gars d'Angular s'intéressent-ils à fournir une .js.map fichier ?
  • Comment puis-je (en tant que développeur JavaScript) utiliser la fonction angular.min.js.map fichier ?
  • Dois-je me soucier de créer .js.map pour mes applications JavaScript ?
  • Comment est-il créé ? J'ai jeté un coup d'oeil à angular.min.js.map et il était rempli de chaînes de caractères au format étrange, donc je suppose qu'il n'est pas créé manuellement.

817voto

aaronfrost Points 4700

El .map sont destinés aux fichiers JavaScript et CSS (et maintenant TypeScript aussi) qui ont été réduits. Ils sont appelés cartes sources . Lorsque vous réduisez un fichier, comme le angular.js il prend des milliers de lignes de code joli et les transforme en quelques lignes de code laid. Avec un peu de chance, lorsque vous envoyez 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 qu'elle présente une erreur, la carte des sources vous aidera à récupérer votre fichier hideux et vous permettra de voir la version originale du code. Si vous n'aviez pas la carte des sources, toute erreur serait au mieux énigmatique.

Idem pour les fichiers CSS. Une fois que vous prenez un Sass o Moins et le compiler en CSS, il ne ressemble en rien à sa forme originale. Si vous activez les cartes de source, vous pouvez alors voir l'état original du fichier, au lieu de l'état modifié.

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

  • A quoi ça sert ? 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 utiliserez la version miniaturisée.
  • Dois-je me soucier de créer un fichier js.map ? Si vous souhaitez être en mesure de 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 construction qui peuvent créer votre fichier .map pour vous, comme ils le font pour d'autres fichiers. Les Sourcemaps échouent si le fichier de sortie n'est pas situé dans le répertoire racine du projet #71

J'espère que cela a un sens.

41 votes

Notez que le fichier de carte ne sera pas envoyé tant que vous ne l'aurez pas appelé, c'est ce qui m'a rendu confus. stackoverflow.com/a/27196201/861487

2 votes

Merci aaron, c'est l'une des meilleures descriptions que j'ai vu pour sourcemap. Je l'utilise dans gulp et j'avais appris presque tout sur gulp et je me demandais exactement comment les cartes de source étaient utilisées, maintenant je peux me sentir confiant en l'utilisant. La plupart des plugins gulp sont également compatibles maintenant, alors qu'il y a un an, certains ne l'étaient pas. Je voulais juste dire que c'est tout à fait logique !

0 votes

@frosty Pour déréférencer le code uglifié . Pouvez-vous expliquer cela ? Est-ce qu'un .js.map maintient une relation (souvent appelée référence ) entre un fichier artisanal et un fichier minifié ?

65voto

garfunkel61 Points 439

Comment un développeur peut-il l'utiliser ?

  1. Ne pas faire de lien votre js.map dans votre index.html (pas besoin de cela)

  2. Les outils de minification (les bons) ajoutent un commentaire à vos .min.js fichier :

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

    qui connectera votre .carte fichier.

    Lorsque le min.js y js.map les fichiers sont prêts...

  3. Chrome : Ouvrir dev-tools , naviguer vers Sources onglet. Vous verrez le sources où sont conservés les fichiers d'applications non minifiés.

50voto

Muhammad Reda Points 8343

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

  1. Grunt : utiliser le plugin grunt-contrib-uglify
  2. Gulp : utiliser le plugin gulp-uglify
  3. Fermeture de Google : en utilisant le paramètre --create_source_map

2 votes

Mise à jour de 2021 : Si vous utilisez ES6 JS, essayez d'utiliser gulp-terser . gulp-uglify d'après ce que j'ai compris, ne prend pas en charge ES6. Si vous utilisez Babel pour transpiler vers ES5, il n'y a pas de problème.

0 votes

Il existe un outil écrit en Ruby que j'ai déjà utilisé : github.com/ConradIrwin/ruby-source_map . Je cherche quelque chose d'écrit en python ou en c.

18voto

Surendra Yadav Points 151

Le fichier map fait correspondre le fichier non minifié au fichier minifié. Si vous apportez des modifications dans le fichier non réduit, ces modifications seront automatiquement répercutées dans la version réduite du fichier.

4voto

rotato poti Points 121

Juste pour ajouter à la façon d'utiliser les fichiers de cartes : J'utilise Google Chrome pour Ubuntu et si je vais dans les sources et que je clique sur un fichier, s'il s'agit d'un fichier de carte, un message s'affiche pour me dire que je peux voir le fichier original 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 s'affiche dans une petite fenêtre.

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X