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 文件也是工具生成的，不用自己编写。
网友评论