如何阅读Base64 VLQ代码？

Question

我试图了解css源地图的工作原理.我创建了一个非常简单的scss文件.

#navbar {
    color: black;
}

当我编译上面的scss时,我得到以下映射文件.

{
"version": "3",
"mappings": "AAAA,OAAQ;EACP,KAAK,EAAE,KAAK",
"sources": ["test.scss"],
"file": "test.css"
}

当我解码"映射"时,我得到以下值.

0) [0,0,0,0], [7,0,0,8]
1) [2,0,1,-7], [5,0,0,5], [2,0,0,2], [5,0,0,5]

那些价值观是什么？

Answer 1

即使阅读了答案后，解释对我来说仍然不太清楚。这是一个简单的英语解释，以防对某人有帮助：

类似的;;AAAA,IAAM,WAAW,SAAX;...意思<line0 info>;<line1 info>;...

所以对于;;AAAA;IAAM,WAAW,SAAX;...，第 0 行和第 1 行没有任何重要信息（空格等）

那么对于第 2 行我们有AAAA,IAAM,WAAW,SAAX

我们使用 base64 字符映射将每个组转换为二进制：

BASE64_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'

所以我们基本上在上面找到索引BASE64_ALPHABET，并将索引转换为6位二进制（6位因为我们使用base64）。例如。A 的索引是 0，所以在 6 位二进制中它是 000000。所以 AAAA 就是000000 000000 000000 000000

那么如果我们这样做，IAAM我们会得到：001000 000000 000000 001100。

那么这个位表示就是 4 个数字的 VLQ 编码版本。我们从左边的块开始，删除符号和延续位，保留这些位。并在连续位为 1 时继续添加它的位。

eg. 001000 is (cont)0100(sign)
so cont = 0 (no other block will be added to this number)
sign=0 (its positive)
bits = 0100 --> so it is 4 in decimal

-- note that we only remove sign bit for the first time. so if we had
101000 001000
we would say
0100 (cont=1, sign=0) 01000 (cont=0)
so we would have had +010001000 = 136

当我们继续这样做时，我们将得到这 4 个数字（连续位应该恰好 4 次为 0）。

• AAAA 将映射到 (0,0,0,0)
• IAAM 将映射到 (4,0,0,6)
• WAAW 将映射到 (11,0,0,11) ...

现在，这些都意味着相对数字。所以我们纠正这些：

• AAAA实际上指向：(0,0,0,0)
• IAAM 实际上指向：(0+4, 0+0, 0+0, 0+6) = (4,0,0,6)
• WAAW 实际上指向： (4+11, 0+0, 0+0, 6+11) = (15,0,0,17) // 我们将其添加到 IAAAM 实际指向的位置

...

所以这里的数字（n1，n2，n3，n4）代表

• n1：生成代码中的列
• n2：sourceMapping 输出的“sources”数组中对应的源文件索引
• n3：原始代码中的行号
• n4：原始代码中的列号

我们从一开始就知道这指的是哪一行。因此，利用上面的信息，我们了解到：

• AAAA：生成代码的第 2 行、第 1 列指向sources[0]、第 0 行、第 0 列
• IAAM：生成代码的第 2 行、第 4 列指向源[0]、第 0 行、第 6 列
• WAAW：生成的代码第 2 行第 15 列指向源[0]，第 0 行第 17 列...

关于此的两个很好的来源：

• 有关 VLQ 编码的更多信息
• 有关如何解释/解码的更多信息

Answer 2

我在http://www.thecssninja.com/javascript/source-mapping的“Base64 VLQ 和保持源映射较小”部分找到了一个示例。

\n\n

\n

上图 AAgBC 一旦进一步处理将返回 0, 0, 32, 16, 1 \xe2\x80\x93 32 是帮助构建以下值 16 的延续位。B 纯粹以 Base64 解码为 1。所以重要的是使用的值是 0, 0, 16, 1。这让我们知道生成的文件的第 1 行（行以分号进行计数）第 0 列映射到文件 0（文件 0 的数组是 foo.js )，第 16 行第 1 列。

\n

\n