Qu'est-ce qu'un fichier Map TypeScript ?

Question

J'ai vu .map pour TypeScript. Ce que je veux savoir, c'est à quoi servent ces fichiers. Contiennent-ils des références à d'autres fichiers référencés dans le fichier .ts ?

Answer 1

Les fichiers .map sont des fichiers de correspondance de source qui permettent aux outils de faire la correspondance entre le code JavaScript émis et les fichiers source TypeScript qui l'ont créé. De nombreux débogueurs (par exemple, Visual Studio ou les outils de développement de Chrome) peuvent utiliser ces fichiers afin de déboguer le fichier TypeScript au lieu du fichier JavaScript.

Il s'agit du même format de carte source que celui produit par certains minifieurs et d'autres langages compilés en JS comme CoffeeScript .

Answer 2

Une carte des sources est essentiellement ce qu'elle dit, une carte d'une langue vers un autre, de sorte que le débogueur peut exécuter le code JavaScript mais vous montrer la la ligne qui l'a généré.

Pour des raisons pratiques de débogage :

Ce que la carte source vous permet de faire, c'est de placer un point d'arrêt sur le fichier TypeScript et ensuite déboguer le code. Cela peut être fait dans Chrome et Firefox. De manière quelque peu déroutante, le comportement du débogueur dans Chrome est que lorsque le point d'arrêt est atteint, le fichier '.js' est en fait affiché (arrêté au point d'arrêt).

À partir d'aujourd'hui, le débogueur de Firefox affichera le fichier TypeScript réel en cas de rupture. Voir la référence ci-dessous :

http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx )

(ceci montre également comment Visual Studio peut être configuré pour créer la carte source)

Pour comprendre comment fonctionne une carte des sources, vous pouvez lire la section "Anatomie d'une carte des sources" ici :

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Answer 3

Il existe deux types de .map qui sont les plus courants dans Typescript. Le premier est Source Map ( .js.map ) et l'autre est Declaration Map ( .d.ts.map ). Je vais expliquer les deux en détail, un par un.

---

Cartes sources : .js.map

Carte source ( .js.map ) contiennent des définitions de mappage qui relient chaque élément de votre code Javascript généré à la ligne et à la colonne spécifiques du fichier Typescript correspondant. Les définitions de mappage de ces fichiers sont au format JSON.

Lorsque les cartes sources sont activées, pendant le débogage, Visual Studio Code et Chrome DevTools afficheront votre code Typescript au lieu du code Javascript complexe généré.

Pourquoi utiliser les cartes sources ?

Dans les applications de production, par exemple, nous utilisons des outils de construction comme Rollup pour supprimer le code mort, Prepack pour éliminer et remplacer le code par des calculs qui peuvent être évalués au moment de la compilation plutôt qu'au moment de l'exécution, puis minifier le code avec Uglify. Sans parler de la complexité du code Javascript déjà transposé. Ainsi, le code résultant peut être très différent du code que vous avez réellement écrit. C'est pourquoi il est recommandé d'utiliser des cartes de source, ce qui facilite le débogage car vous pouvez parcourir votre code source original.

Les outils de suivi des processus, de suivi des erreurs, de journalisation et de traçage de la pile tels que Sentry, Bugsnag, PM2, Winston utilisent également des cartes de source pour faire correspondre les lignes et les colonnes des traces de la pile des exceptions en Javascript à Typescript.

Comment utiliser les cartes sources ?

Vous pouvez activer les cartes sources soit en utilisant --sourceMap lors de la compilation ou en la spécifiant dans la section compilerOptions en tsconfig.json de votre projet, comme suit :

{
  "compilerOptions": {
    ...
    "sourceMap": true,
    "outDir": "./out"
  }
}

Note de sécurité pour les cartes sources :

Si vous souhaitez obtenir une certaine sécurité en obscurcissant le code de votre navigateur, vous pouvez exclure les cartes sources du code du navigateur dans votre application de production.

---

Cartes de déclaration : .d.ts.map

Carte de déclaration ( .d.ts.map ), également connus sous le nom de cartes de sources de déclaration, contiennent des définitions de mappage qui relient chaque déclaration de type générée dans le fichier .d.ts à votre fichier source original ( .ts ). La définition de la cartographie dans ces fichiers est au format JSON.

Ceci est utile pour la navigation dans le code. Vous pourrez utiliser des fonctions de l'éditeur telles que "Aller à la définition" et Renommer pour naviguer et modifier le code de manière transparente dans les sous-projets lorsque vous avez divisé un grand projet en plusieurs petits projets multiples en utilisant des références de projet.

Pour activer les cartes de déclaration, spécifiez les deux options suivantes dans le champ tsconfig.json de votre projet :

{
  "compilerOptions": {
    ...
    "declaration": true,
    "declarationMap": true
  }
}

---

C'est ça ! J'espère que cela vous aidera.