TypeScript 什么是地图文件

在继续之前，这是您应该熟悉的几个术语：

TypeScript源文件： 这些是您自己编写的文件，相当容易理解，即它是人类可读的。
生成或转译的JavaScript代码： 这段代码是我们创建的TypeScript源文件的等效JavaScript代码，但它不是人类可读的。通过JavaScript转译器（如Babel和Webpack）从TypeScript源文件生成或创建此代码，以便代码可以在较旧的浏览器上运行，而不仅仅在最新的浏览器上运行。

解释： TypeScript地图文件是源映射文件，它允许工具在生成的JavaScript代码和创建它的TypeScript源文件之间进行映射。然后，这些源映射文件将帮助调试TypeScript文件，而不是调试生成的JavaScript文件。许多调试器使用这些TypeScript地图文件来在生产环境中调试代码。源映射文件将从转译的JavaScript文件映射到原始的TypeScript文件。

转译或生成的JavaScript代码并不容易阅读，因为代码可能被压缩、编译、混淆、缩小，因此不容易理解。这些文件在生产环境中部署。现在假设在生产环境中出现了一个错误。由于生成的JavaScript代码不容易阅读，您如何调试它呢？

这就是TypeScript地图文件拯救我们的地方。

TypeScript 什么是地图文件

“.map”文件充当翻译器的角色。它包含TypeScript源代码和已转换的JavaScript代码的详细信息。如果出现生产bug并且有源映射文件，您可以轻松地对生产bug进行调试。您只需将源映射文件上传到开发工具中，所有浏览器都支持源映射，并将已转换的JavaScript代码转换回可读的TypeScript代码（人类可读的语言）。

使用tsconfig.json文件中的sourceMap编译选项生成TypeScript映射文件：

Javascript

{ 
  "compilerOptions": { 
   ... 
   "sourceMap": true
    }, 
   ... 
}

Map文件的结构： 如果我们查看转码后的JavaScript所在的文件夹，我们会看到源代码映射文件。这些文件的扩展名为.map。如果我们打开一个源代码映射文件，我们会发现它是以JSON格式存储的：

JavaScript

{ 
  "version": 3, 
  "file": "home.js", 
  "sourceRoot": "", 
  "sources": [ 
    "../src/home.ts"
  ], 
  "names": [], 
  "mappings": ";;AAAA,uCAAoA;...."" 
} 
`}

引用 JavaScript 文件的定义在一个 file 字段中。
引用 TypeScript 文件在一个 sources 字段中。注意它引用了项目结构中的文件。
sourceRoot 字段是 TypeScript 文件的根路径。
mappings 字段包含了 JavaScript 代码中每个位置与 TypeScript 代码中位置的映射关系。这些都是经过 Base64 编码的可变长度的数量。
names 字段是源代码中使用的标识符列表，这些标识符在输出中被更改或删除。
version 字段定义了使用的源映射规范的版本。