1.定义

SourceMap 一个存储源代码与编译代码对应位置映射的信息文件

在前端的工作中主要是用来解决以下三个方面出现的 debug 问题：

• a. 代码压缩混淆后
• b. 利用 sass 、typeScript 等其他语言编译成 css 或 JS 后
• c. 利用 webpack 等打包工具进行多文件合并后

2.原理

{
　　　　version : 3,        //Source map的版本
　　　　file: "out.js",      //转换后的文件名
　　　　sourceRoot : "",   //转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空
　　　　sources: ["foo.js", "bar.js"],   //转换前的文件。该项是一个数组，表示可能存在多个文件合并
　　　　names: ["src", "maps", "are", "fun"],   //转换前的所有变量名和属性名
　　　　mappings: "AAgBC,SAAQ,CAAEA"  //记录位置信息的字符串
　　}

其实不用懂原理直接使用就好，毕竟 .map 文件也是工具生成的，不用自己编写。