Ich versuche zu verstehen, wie css source map funktioniert. Ich habe eine sehr einfache scss-Datei erstellt.
%Vor%Wenn ich das obige scss kompiliere, bekomme ich die folgende Map-Datei.
%Vor%Wenn ich "Mappings" dekodiere, bekomme ich die folgenden Werte.
%Vor%Was sind diese Werte?
Ich fand ein Beispiel bei Ссылка , unter dem Abschnitt "Base64 VLQ und behalte die Quellkarte klein".
Das obige Diagramm AAgBC, das einmal weiterverarbeitet wurde, würde 0, 0, 32, 16, 1 zurückgeben - das 32 ist das Fortsetzungsbit, das hilft, den folgenden Wert von 16 aufzubauen. B rein decodiert in Base64 ist 1. Also die wichtigen Werte, die verwendet werden sind 0, 0, 16, 1. Dies lässt uns wissen, dass Zeile 1 (Zeilen werden von den Semikolons gezählt) Spalte 0 der generierten Dateizuordnungen zu Datei 0 (Array von Dateien 0 ist foo.js), Zeile 16 in Spalte 1.
Ссылка kann Ihnen beim Codieren / Decodieren von SourceMap V3- und Base64-VLQ-Daten helfen.
Trotz der Beispiele, die ich finden konnte, brauchte ich eine Weile, um zu verstehen, wie das Codieren / Decodieren wirklich funktioniert. Also dachte ich mir, ich würde am besten lernen, wenn ich versuche, etwas ganz explizites, Schritt für Schritt selbst zu machen. Ich begann mit der Erklärung von VLQ auf diesem Blog ,
Ich verwende den folgenden Python-Funktor, um Quellkarten für Transcrypt zu generieren. Der Code ist einfach und ich denke, gibt einen guten Einblick, wie die Codierung / Decodierung im Prinzip funktioniert. Um trotz seiner Einfachheit Geschwindigkeit zu erreichen, werden die ersten 256 Zahlen zwischengespeichert, die am häufigsten zur Erstellung einer v3-Quellkarte verwendet werden.
%Vor%Anwendungsbeispiel:
%Vor%Tags und Links css sass source-maps