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

http://www.thecssninja.com/javascript/source-mappingの例では、「Base64 VLQとソースマップを小さく保つ」というセクションがあります。

上記のダイアグラムは、0、0、32、16、1を返します.32は、16の次の値を構築するのに役立つ継続ビットです。BはBase64で純粋に1であるため、使用される重要な値は0,0,16,1です。これにより、生成されたファイルの列0がファイル0（ファイル0の配列はfooです）にマップされます。 js）、列1の16行目。

Answer 2

SourceMap V3およびBase64 VLQデータのエンコード/デコードに役立ちます。

Answer 3

私が見つけることができる例がありますが、コーディング/デコードが実際にどのように機能するかを理解するのにかなり時間がかかりました。だから私は何かを自分自身を非常に明示的にステップバイステップで作ろうと努力してベストを尽くすと思った。私はthis blog、

でVLQの説明を始めました。次のPythonファンクタを使ってTranscryptのソースマップを生成しました。 コードはシンプルで、コーディング/デコーディングが原則としてどのように機能するかをよく理解していると思います。 シンプルであるにもかかわらず速度を達成するために、v3のソースマップを生成するのに最も頻繁に使用される最初の256個の数値をキャッシュします。

import math 

class GetBase64Vlq: 
    def __init__ (self): 
     self.nBits32 = 5 
     self.encoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/' 
     self.prefabSize = 256 
     self.prefab = [self (i, True) for i in range (self.prefabSize)] 

    def __call__ (self, anInteger, init = False): 
     if not init and 0 < anInteger < self.prefabSize: 
      return self.prefab [anInteger] 
     else: 
      signed = bin (abs (anInteger)) [2 : ] + ('1' if anInteger < 0 else '0') 
      nChunks = math.ceil (len (signed)/float (self.nBits32)) 
      padded = (self.nBits32 * '0' + signed) [-nChunks * self.nBits32 : ] 
      chunks = [('1' if iChunk else '0') + padded [iChunk * self.nBits32 : (iChunk + 1) * self.nBits32] for iChunk in range (nChunks - 1, -1, -1)] 
      return ''.join ([self.encoding [int (chunk, 2)] for chunk in chunks]) 

getBase64Vlq = GetBase64Vlq() 

使用例：

while (True): 
    print (getBase64Vlq (int (input ('Give number:'))))