Open MJingv opened 2 years ago
Source Map 就是一个信息文件,里面存储了代码打包转换后的位置信息,实质是一个 json 描述文件,维护了打包前后的代码映射关系
{ version : 3,//version:Source map的版本,目前为3。 file: "out.js",//file:转换后的文件名。 sourceRoot : "",// sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。 sources: ["foo.js", "bar.js"],//sources:转换前的文件。该项是一个数组,表示可能存在多个文件合并。 names: ["src", "maps", "are", "fun"],//names:转换前的所有变量名和属性名。 mappings: "AAgBC,SAAQ,CAAEA"// mappings:记录位置信息的字符串 }
两个文件的各个位置是如何一一对应的?这是一个很长的字符串,它分成三层。
mappings:"AAAAA,BBBBB;CCCCC" //表示,转换后的源码分成两行,第一行有两个位置,第二行有一个位置。
位置对应的原理
每一位都采用VLQ编码表示;由于VLQ编码是变长的,所以每一位可以由多个字符构成
sourcemap
定义
Source Map 就是一个信息文件,里面存储了代码打包转换后的位置信息,实质是一个 json 描述文件,维护了打包前后的代码映射关系
生产环境代码解决问题
sourcemap的格式
mapping属性介绍
两个文件的各个位置是如何一一对应的?这是一个很长的字符串,它分成三层。
位置对应的原理
每一位都采用VLQ编码表示;由于VLQ编码是变长的,所以每一位可以由多个字符构成
参考文档