10

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]

それらの値は何ですか？

4

3 に答える 3

3

http://www.thecssninja.com/javascript/source-mappingの「Base64 VLQ とソース マップを小さく保つ」セクションで例を見つけました。

上の図の AAgBC をさらに処理すると、0、0、32、16、1 が返されます。32 は、次の値 16 を構築するのに役立つ継続ビットです。純粋に Base64 でデコードされた B は 1 です。したがって、使用される重要な値は次のとおりです。 0, 0, 16, 1. これにより、生成されたファイルの行 1 (行はセミコロンによってカウントされます) 列 0 がファイル 0 (ファイル 0 の配列は foo.js) にマップされ、行 16 であることがわかります。列 1。

于 2013-11-20T23:04:21.020 に答える
1

見つけた例にもかかわらず、コーディング/デコードが実際にどのように機能するかを理解するのにかなりの時間がかかりました. だから私は、非常に明快で段階的な方法で自分で何かを作ることを試みることによって、最もよく学ぶことができると思った. このブログでVLQの説明から始めましたが、

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

import math

class GetBase64Vlq:
    def __init__ (self):
        self.nBits32 = 5
        self.encoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
        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:'))))
于 2016-04-09T09:24:01.227 に答える