瞭解源映射

Question

我有行號下面的代碼在basic.js文件：

1 /** 
2 * This is a multi-line comment. 
3 * So the error shouldn't throw until a later line. 
4 * Om nom nom. 
5 */ 
6 throw new Error('Hello world!'); 

然後，我已經過壓縮文件：

1 
2 throw new Error('Hello world!'); 
3 //@ sourceMappingURL=basic.js.map 

和映射：

{ 
    "version" : 3, 
    "file" : "basic.min.js", 
    "sources" : ["basic.js"], 
    "names" : [], 
    "mappings" : "AAIG,AAAH;CACC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC" 
} 

我正在查看縮小文件中的第二行，因此我需要查看映射的這一部分：

CACC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC" 

我已經解碼使用此decoder第一段CACC和它輸出：

[1,0,1,1] 

正如我根據this tutorial理解它指出在basic.min.js列1被映射到與該文件sources中的索引0，即basic.js以及其第1行和第1列。但它映射到原始數字中的第6行。我錯過了什麼？

Answer 1

你缺少一個

1. 行和列從零開始
2. 段值實際上是增量加到前值由線來獲得當前位置

線：

//basic.js 
0 /** 
1 * This is a multi-line comment. 
2 * So the error shouldn't throw until a later line. 
3 * Om nom nom. 
4 */ 
5 throw new Error('Hello world!'); 

//basic.min.js 
0 
1 throw new Error('Hello world!'); 
2 //@ sourceMappingURL=basic.js.map 

//line 0 
AAIG > 0, 0, 4, 3 // current value 0, 0, 4, 3 
AAAH > 0, 0, 0, -3 // current value 0, 0, 4, 0 
; 
//line 1 
CACC > 1, 0, 1, 1 // current value 1, 0, 5, 1 

1 // output file column 
0 // input file index 
5 // input file line 
1 // input file column 

這讓我們知道生成的文件m的第1行第1列APS到文件0（在文件0的數組basic.js），5號線在第1列

看看可視化工具here