Статья на 10 000 слов: О исходной карте, этой статьи достаточно

внешний интерфейс Webpack
Статья на 10 000 слов: О исходной карте, этой статьи достаточно

56.gif

Построить запись каталога серии столбцов

Чжиюань Ван, группа медицинской поддержки отдела передовых технологий WeDoctor

предисловие

В настоящее время, пока это инженерный проект, большинство из них неотделимы от исходной карты, одним словом: построить мост между кодом до обработки и кодом после обработки. Однако очень немногие студенты действительно глубоко понимают его принцип работы. Когда они действительно спрашивают, они остаются на «А, есть файл .map, который можно использовать для поиска информации об исходном коде». исходный код представляет собой простое предложениеconsole.log('好好学习,天天向上')из.mapдокумент

Если я скажу вам, информация о местоположенииmappingСоответствующая стопка букв

sourcemapЭто стало слоном в комнате. После таких проблем, как «невозможно сопоставить с исходным файлом» и «можно сопоставить только с файлом, обрабатываемым загрузчиком», большинство людей не имеют ни малейшего представления; и, как сказал TJ: «Дон нельзя напрямую копировать решение, его нужно понять и реализовать самому";

Без сплетен, давайте перейдем к делу (извините, в последнее время люблю читать сторителлинг), что вы почерпнете из этой статьи?

Цель этой статьи

  • sourcemapЭлементы конфигурации четко организованы для вас, и между прочим предоставлены лучшие практики для производственной среды и среды разработки.
  • sourcemapПринцип позиционирования четко устроен для вас,Base64-VQLкак генерироватьmappingЗапишите соответствие между исходным кодом и обработанным кодом.
  • Спасибо за отличный подарок, кодировка четко организована для вас, кодирование base64, кодирование VLQ, кодирование base64-vlq трех поколений зла

Читайте здесь, вам нужно бежать?

Облачный диск с коллекцией кинофильмов жены, ан, невозможно подарить, просто дайте один, чтобы вы посмотрели

исходная карта: элементы конфигурации devTools две или три вещи

дляsourcemapНасколько нам известно, наиболее распространенным является элемент конфигурации в webpackdevToolsСколько конфигураций мы можем выбрать?

Не много, двадцать видов взглядов, хорошо,Официальная ссылка на сайт здесь, все идите запоминать, не забудьте крикнуть, когда закончите, эта статья окончена.

Прошу прощения, так называемое "решать из середины", так много элементов конфигурации на самом деле представляют собой просто комбинацию из пяти ключевых слов eval, source-map, Cheap, Module и Inline. Пожалуйста, имейте в виду эту таблицу. Клык может объяснить Это.

ключевые слова имея в виду
source-map Создать файл .map
eval Оберните код модуля с помощью eval
cheap Не содержит информации о колонке (объяснение информации о колонке будет подробно описано ниже) и не содержит исходную карту загрузчика
module Содержит исходную карту загрузчика (например, jsx to js, ​​исходную карту Babel), в противном случае исходный файл не может быть определен
inline Встроить .map как DataURI без отдельного создания файла .map

Как понять это? Увидеть правду на практике.

Подробный пример

Исходный код файла выглядит следующим образом

let a = 1,b;
b = a;
Выходной результат после обработки исходной карты
//# sourceMappingURL=bundle.js.map
ключевые слова Функции
source-map Самая полная информация о местоположении, а также самый большой файл .map, самая низкая эффективность
Результат вывода после обработки eval
eval("var a = 1,\n    b;\nb = a;\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/index.js\n// module id = 0\n// module chunks = 0\n\n//# sourceURL=webpack:///./src/index.js?");
ключевые слова Функции Решать проблему
eval Оберните исходный код с помощью ``eval для выполнения Используйте строки для кэширования для повышения производительности
Решение проблемы: оригинальный автор объяснилwhyeval, ключ заключается в следующих двух предложениях

devtool: "source-map" cannot cache SourceMaps for modules and need to regenerate complete SourceMap for the chunk. It's something for production.

devtool: "eval-source-map" is really as good as devtool: "source-map", but can cache SourceMaps for modules. It's much faster for rebuilds.

В плане перевода важно акцентировать внимание: добавить eval — это то же самое, что не добавить его 🐂, а добавить evalevalЕго можно кэшировать позже, так что больше 🐂.

Inline-source-mapвывод после обработки
//# sourceMappingURL=data: ...（base64 字符串）
ключевые слова Функции Решать проблему
inline Вставьте карту как DataURI без создания отдельного файла .map. уменьшить количество файлов
cheap-source-mapвывод после обработки
//# sourceMappingURL=bundle.js.map
ключевые слова Функции Решать проблему существующие проблемы
cheap Сообщения об ошибках определяются только для строк, а не для столбцов. Снижение точности в обмен на уменьшение содержимого файла

дляcheap-source-mapНапример, будет определена только строка с ошибкой

И дляsource-map, это будет с точностью до столбца

существующие проблемы
  1. Сообщения об ошибках определяются только для строк, а не для столбцов.
  2. Для кода, экранированного такими инструментами, как babel, можно найти только преобразованный код.

Это подводит нас к нашему последнему ключевому слову

cheap-module-source-mapвывод после обработки
//# sourceMappingURL=bundle.js.map
ключевые слова Функции Решать проблему
module Отображение информации о файле до и после обработки загрузчиком будет сохранено. Решение использовать «дешевые элементы конфигурации» приводит к тому, что передняя часть загрузчика не может найти проблему с исходным кодом.

тестовый код

# sum
let sum =  (a, b) => {
    return a + b
}
debugger
export default sum;
# index.js
import sum from './sum';
console.log(sum);

дляcheap-source-mapНапример, в это время отладчик страницы показывает, что исходный код является кодом es5, потому что он был экранирован babal.

И дляsource-map, это будет точно соответствовать исходному коду

Сводка ключевых слов элемента конфигурации
至此，我们`source-map`的五个关键词的学习也就告一段落了，而最开始提到官网给出的二十几种配置无非是选词组合而已，再附送下一些常见配置项的关键参数对比吧。

Рекомендации по элементам конфигурации
среда разработки
  • Наши требования к sourceMap в среде разработки: быстрота (eval), полная информативность (модуль),
  • И поскольку в настоящее время код не сжат, нам не так важна информация о столбцах кода (дешево),

Поэтому рекомендуемая конфигурация среды разработки:devtool: cheap-module-eval-source-map

Производственная среда
  • В общем, мы не хотим, чтобы кто-нибудь видел наш нескомпилированный исходный код прямо в браузере.
  • Поэтому мы не должны предоставлять sourceMap напрямую в браузер. Но нам нужен sourceMap, чтобы найти наше сообщение об ошибке,
  • С одной стороны, webpack будет генерировать файлы исходной карты для предоставления инструментов сбора ошибок, таких как sentry, с другой стороны, он не будет добавлять справочные аннотации к пакетам, чтобы избежать использования браузера.

В этот момент мы можем установитьdevtool: hidden-source-map

До сих пор оsourcemapНа уровне приложения в webpack мы немного знаем об этом. Но на самом деле это только стартер

Самая большая цель этой статьи здесь: как sourcemap сопоставляет исходные файлы и обработанные файлы?

Анализ выходного содержимого: подробный файл карты

Чтобы проанализировать реализацию, нам все же придется начать с явления, предполагая, что исходный файлscript.jsСодержание

let a=1;
let b=2;
let c=3;
Его вывод

script-min.js

var a=1,b=2,c=3;

script-min.js.map

{"version":3,"file":"script-min.js","lineCount":1,"mappings":"AAAA,IAAIA,EAAE,CAAN,CACIC,EAAE,CADN,CAEIC,EAAE;","sources":["script.js"],"names":["a","b","c"]}
Анализ конкретного значения полей файла
поле имея в виду
version Версия исходной карты, на данный момент 3
file Преобразованное имя файла
sourceRoot Каталог, в котором находятся файлы до конвертации. Если он находится в том же каталоге, что и файл перед преобразованием, этот элемент пуст.
sources Файл перед преобразованием этот элемент является массивом, указывающим, что могут быть несколько слияний файлов
names Все имена переменных и свойств до преобразования
mappings Строка для записи информации о местоположении

Видно, что, поскольку мы хотим определить местонахождение, нас, естественно, больше всего беспокоит атрибут сопоставления с функцией [записи информации о местоположении]. Далее мы подробно объясним, как его анализировать.mapping.

Значение значения атрибута сопоставления
Угол анализа имея в виду
корреспонденция строки Он представлен точкой с запятой (;), и каждая точка с запятой соответствует строке преобразованного исходного кода. Таким образом, содержимое перед первой точкой с запятой соответствует первой строке исходного кода и так далее.
местонахождение корреспонденция Представлено запятыми (,), каждая запятая соответствует позиции в преобразованном исходном коде. Следовательно, содержимое до первой запятой соответствует первой позиции исходного кода строки и так далее.
информация о сегментации слов Выраженный в коде VLQ, это означает запись местоположения исходного кода до преобразования, соответствующего местоположению, файлу, которому он изначально принадлежал, и другой информации.
  • [Строка соответствия] Это хорошо понятно, то есть точка с запятой - это строка, потому что это в основном строка после сжатия, так что это не полезная информация;
  • [Соответствие местоположения] можно понимать как сегментацию слов, каждая запятая соответствует позиции преобразованного исходного кода;
  • [Информация о сегментации слов] является ключом, таким какAAAAпредставляет местоположение исходного кода до того, как это местоположение будет преобразовано, сVLQкодированное представление;

В котором слово [информация] до пяти в группе (если не переменная, то будет только четыре), это:

  • Первая цифра указывает, в каком столбце [кода постконверсии] находится эта позиция.
  • Вторая цифра указывает, какому файлу в атрибуте [sources] принадлежит это место.
  • Третья цифра указывает, к какой строке [доконверсионного кода] относится данная позиция.
  • Четвертая цифра указывает, к какому столбцу [Код до преобразования] относится эта позиция.
  • Пятая цифра указывает, какой переменной атрибута [names] принадлежит эта позиция.

На данный момент мы также знаем, как составлен файл карты.

мелкое мышление
Q：但为什么这么设定呢？理解绝对比死记更有效，其他都好理解，但谈到分词信息中的位置对应，我们下意识应该都会想到坐标，记录组成元素在编译后文件和源文件的坐标，就形成了映射；但我们看到的`mapping`却是字符串，为什么？


A：因为体积，如果直接坐标记录信息，至少存在两点空间损耗：编译后文件的纵坐标大的惊人；因为坐标信息是数字，如果采用数组存储，将有大量存储空间浪费。


注意上面的`version`字段，象征着版本，而对于现在的默认也是最新版`Source Map Revision 3.0`（V3）而言，通过使用 Base64 VLQ 编码，大大缩小了.map 文件的体积，而这也是本文最有价值的思考点：`Base64 VLQ`是啥？为什么能做到缩减体积。

Включено сюдаbase64vlq онлайн конвертацияадрес, вышеmappingsСоответствующий строковый ввод получит соответствующую цифровую информацию, такую ​​какAAAAсоответствует0000, правило сопоставления между нимиbase64vlqкодирование.

Организуйте цели

В этот момент мы организуем следующие действия, смотрим в небо и идем с опущенными головами.

Мы надеемся решить проблему, связанную с тем, что информация о координатах занимает слишком много места, в основном из-за двух точек.

  • Проблема в том, что номер столбца файла после компиляции слишком велик: поскольку он будет скомпилирован в одну строку, вполне возможно, что ордината последнего элемента будет очень большой.
  • Проблема занимаемой структурой данных места: массивы, естественно, занимают больше места, чем строки.

Размышляя над этими двумя вопросами, мы полностью поймем, почему мы используем для записи информации о местоположенииmappingбудет этот призрак

AAAA,IAAIA,EAAE,CAAN,CACIC,EAAE,CADN,CAEIC,EAAE

Поднимите себе настроение и продолжайте учиться!

Относительная позиция для решения проблемы слишком большого номера столбца

Для проблемы, связанной с тем, что номер столбца элемента положения после вывода первой точки особенно велик, для решения проблемы можно использовать схему относительного положения.Конкретные правила заключаются в следующем.

  • Входная позиция и выходная позиция, записанные в первый раз, являются абсолютными, а последующие входная позиция и выходная позиция перемещаются относительно предыдущей позиции.

Например, предположим, что содержимое a.jsfeel the force, результат после обработкиthe force feel, имена которых:['feel','the','force'], source: ['a.js']

Тогда его выходное отношение в соответствии с относительным положением выглядит следующим образом

комбинация символов Категория местоположения выходное местоположение место ввода карта (выход x принадлежит индексу файла в источнике Введите х введите д индекс переменной в именах)
feel абсолютный 10, 0 0, 0 10 0 0 0 0
the относительно -10, 0 5, 0 -10 0 5 0 1
force относительно 4, 0 4, 0 4 0 4 0 2 
其中【位置类别】的相对代表相对上一个元素坐标的偏移，比如`the`的输出位置相对于`feel`就是 x 轴左移 10，y 轴不变，所以其输出位置为(-10, 0)；其输入位置是 x 轴右移 5，y 轴不变，所以其输入位置为(5 ,0)，`force`对比`the`类推即可。


有心的小伙伴会发现【输出 y 坐标】在映射中没有记录，其原因也很简单，因为处理后的输出代码都是一行的，固定为 0，所以也就没必要记录了


现在，我们就来到了第二点了，如何压缩`mapping`？涉及到压缩体积，便逃不掉编码


就像上面说的，sourcemap 通过`Base64 VLQ`编码进行了缩小.map 文件的体积的处理。那就开始琢磨下关键而神奇的`Base64 VLQ`吧

base64VLQ решает проблему занимаемого места структурой данных

以坐标信息`[0,0,0,0], [4,0,0,4,0]`为例


首先，我们得明确，对于源、目标文件的元素坐标映射关系，数组是不可能用数组的，这辈子是不可能用数组的，用字符串不香吗？（原因就不解释了）


既然是字符串，原例就变成了`0,0,0,0 | 4,0,0,4,0` ，有没有感觉这个`,`有点不顺眼？本来它们就都是描述同一个映射关系，干嘛还浪费这空间，想想我们编译后的那一大串，如果保留这个分隔符，别扭的很，那如何去掉呢？主角`Base64-VLQ`登场。


Base64-VLQ 编码见名知意，其实就是 VLQ 编码方式和 base64 编码的“一套组合”，它能去除分隔符主要在于 VLQ 编码方式【变多】的特性，关键点就一句：用二进制表示，进行分组后每组最高位表示连续性，如果是 1，代表这组字节后面的一组字节也属于同一个数；如果是 0，表示该数值到这就结束了。


不明白？十脸懵逼？没关系，咱一步步来。要了解`Base64 VLQ`，咱就先查漏补缺下最熟悉的陌生人：`base64`编码。

ezgif.com-optimize.gif

Кодировка BASE64

Наши одноклассники по развитию сначала узналиbase64наверное маленькийiconПри обработке иконок я узнал в то время, что двоичный файл изображения можно преобразовать в текст, тем самым уменьшив HTTP-запросы, но он подходит только для небольших иконок и другого небольшого содержимого, потому что использованиеbase64Обработка кодирования приведет к увеличению объема обрабатываемого объекта на 33%, тогдаbase64что именно? Кажется, это просто для работы с маленькими значками? Три классических вопроса, чтобы понять вещи

что это такое?

Определение в MDN:

это группа подобныхдвоичный код в текст(двоично-текстовые) правила кодирования, чтобы двоичные данные могли быть представлены в строковом формате ASCII после интерпретации в представлении по основанию 64.

Почему оно появляется?

Вспомните, вы когда-нибудь сталкивались с открытием с помощью Блокнота?exe,jpg,pdfКогда вы видите кучу искаженных символов в этих файлах? Очень просто, в коде ASCII предусмотрено, что 33 символа 031 и 127 являются управляющими символами, а 95 символов 32126 — печатными символами (производными отОфициальный сайт Юникод), то есть передача по сети и обработка текста могут использовать только эти 95 символов, а символы за пределами этого диапазона использовать нельзя. Так как же могут быть переданы другие символы? Для этого требуется метод преобразования двоичного кода в строку.

Как ты сделал это?

Кодирование само по себе не сложное.Для пользователей это просто вопрос следования картинке.Ключевым является то,почему правила установлены таким образом и причины появления правил патчинга.

Поскольку в кодовой таблице ASCII есть непечатаемые символы, мы определяем новую кодовую таблицу, диапазон которой фиксируется в пределах печатаемых символов. (Это означает, что для представления символа кодовой таблицы ASCII требуется несколько новых символов кодовой таблицы. Причина очень проста. Если вы хотите представить все фрукты яблоками и грушами, вы должны определить два яблока как арбузы, две груши как помидоры. , и одно яблоко.Груша-это комбинация перестановок)

Сколько байтов занимает составная единица символов новой кодовой таблицы?

Мы знаем базовый код ASCII и используем 7-битные двоичные числа для представления составляющих единиц.Диапазон представления новой кодовой таблицы меньше, чем у кодовой таблицы ASCII (поскольку необходимо убедиться, что новая кодовая таблица заполнена печатных символов), что означает, что новая кодовая таблица использует Двоичное число должно быть менее семи бит, и чем меньше двоичное число, тем меньше символов оно может представлять, тогда для представления символа требуется больше двоичных чисел, и количество бит должно быть как можно больше, т.к. таким образом все наши составляющие элементы (новая кодовая таблица) становятся больше, поэтому поставим 6 бит. 2 ^ 6 равно 64, поэтому новая кодовая таблица называется base64 (эта часть является чисто личным пониманием, только для рассуждений и памяти, если есть какие-либо ошибки, пожалуйста, дайте мне знать)

Как кодировать и декодировать код ASCII в Base64

Символы ASCII занимают 8 двоичных битов, а символы Base64 — 6. Наименьшее общее кратное равно 24, то есть 4 символа base64 могут использоваться для представления 3 символов ASCII. Тогда есть следующие правила преобразования

  1. Строка кода ASCII преобразуется в двоичное значение в соответствии с таблицей сравнения кодов ASCII;

  2. Разделить двоичное значение на 6 бит;

    1. Предполагая, что количество символов кратно 3, например, три символа ASCII могут быть сгруппированы в группы по три и представлены четырьмя символами base64 (3 * 8 == 4 * 6, энен, должно быть понятно)

    2. Если длина кодировки строки не является кратным 3, она будет заполнена 0. Если есть 6 последовательных 0 битов, используйте=Представлять.

  3. Затем 6-битный двоичный код преобразуется в десятичный, и закодированные символы находятся в соответствии с таблицей поиска Base64.

Диаграмма

расширять

существуетJavaScript, API преобразования между кодом base64 и ASCII предоставляется изначально

Имя функции Функция параметр
atob строка base64 в строку ASCII строка base64
btoa Строка кода ASCII в строку base64 ASCII-строка
Например

Возьмите в качестве примера символ A в ASCII, преобразуйте A в двоичный код, как указано выше.010000001, битов меньше трех, поэтому для заполнения 24 бит добавляется 0.

Тогда 6 бит это группа, управлениеBase64 编码表, если это все 0, замените его знаком =

Итак, в результате кодировка Base64, соответствующая символу A,QQ==

На данный момент мы можем, по крайней мере, ответить на все тонкости base64, «самого знакомого незнакомца».

Правило расширенного исправления: URL-безопасная кодировка Base64
Правила исправления отображаются фоном
Base64 编码可用于在[HTTP](http://zh.wikipedia.org/wiki/HTTP)环境下传递较长的标识信息，然而，标准的 Base64 并不适合直接放在 URL 里传输，因为 URL 编码器会把标准 Base64 中的「/」和「+」字符变为形如「%XX」的形式，而这些「%」号在存入数据库时还需要再进行转换，因为[ANSI](http://zh.wikipedia.org/wiki/ANSI) [SQL](http://zh.wikipedia.org/wiki/SQL)中已将「%」号用作通配符。


咱证明下权威性，来看看`rfc`中的定义

For base 64, the non-alphanumeric characters (inparticular, "/") may be problematic in file names and URLs.

翻译过来即：

对于 base 64 编码, 非字母表中的字符 (特别是 "/") 可能会在文件名和 URL 中出现问题
Правила исправления
为解决此问题，可采用一种**用于 URL 的改进 Base64**编码，具体也很简单，加密时先执行三条规则再转`base64`即可（解密反之）
  • не дополняется в конце=Нет
  • +использовать*заменять
  • /использовать-заменять
реализация-расширение: вJavaScriptкак добитьсяbase64urlкодирование и декодирование?
кодирование
 function urlsafe_b64encode(str) {
       base64Str = base64_encode(str);
       base64UrlStr = base64Str.replaceaLL('+','*').replaceaLL('/','-').replaceaLL('=','');
       return base64UrlStr;
    }
расшифровка
function urlsafe_b64decode(base64UrlStr) {
   		 data = base64Str.replaceaLL('*','+').replaceaLL('-','/');
       let mod4 = strlen(data) % 4;
       if (mod4) {
           data = data.substr('====', mod4);
       }
       return base64_decode(data);
    }

Заинтересованные друзья могут использоватьадрес пакета npm для обработки base64urlУбедитесь сами

# npm i base64url 
const base64url = require('base64url');
console.log('字符串     base64     base64URL');
console.log(' A     ', encode('A'),'     ',base64url("A")); //  A      QQ==       QQ

VLQ-кодирование

Это очень незнакомый термин, но онsourcemapОсновной инструмент для реализации все тот же, классические три вопроса, чтобы понять вещи

что это такое?

VLQ — это аббревиатура переменной длины, которая используется для представления очень больших значений любым битовым двоичным кодом.

Почему оно появляется?

Уменьшите пространство, занимаемое многозначными элементами (например, созданным вышеmapping, то есть через|Чтобы различать разные числа, это|На самом деле лучше его опустить, потому что это только для понимания читателя)

Как ты сделал это?

Преобразуйте число в двоичное, а затем укажите, что начало и конец двоичного числа имеют особое значение для идентификации начала числа, тем самым экономя место, занимаемое разделителем.Настройки следующие:

  • Двоичный байт имеет 8 бит.В кодировании VLQ старший бит устанавливается, чтобы указать, является ли он непрерывным или нет.За исключением старшего бита, если он меньше кратного 7 битам, старший бит заполняется 0;
  • Для больших чисел необходимость в множестве агрегатов, то, что если эти клетки принадлежат к тому же цифровым настройкам правила кодирования, представляет собой самый высокий уровень непрерывности, если оно 1, установленный представитель группы слов следующий номер байта к тому же разделу; если это 0, что указывает на то значение к концу; это позволяет избежать разделителя, такого как|, внешний вид

Например

Как представить числа 7, 1200 и -7 в VLQ?

количество бинарный
7 111
1200 10010110000
на 7
  • Сначала оцените, кратно ли оно семи: нет, всего три бита, поэтому ведущие биты заполнены 4 нулями;
  • Существует только одна единица, и естественный старший бит равен 0 (отмечающий конец числа);

Результирующее кодирование VLQ:0000111;

За 1200
  • Сначала оцените, кратно ли оно семи: нет, битов 11, значит, передний бит заполнен 3 нулями, и объект обработки становится00010010110000
  • Есть только две единицы, поэтому старший бит первой единицы равен 1 (чтобы идентифицировать следующую единицу или представлять число), а второй единице равен 0;

Окончательный результат1000100100110000

Слишком далеко,VLQКодировка .Ну, ленивые люди меняют мир.

Расширение 1: натуральное число смещения VLQ: базовый формат Git

В процессе понимания кодирования VLQ случайно почерпнул много знаний под айсбергом, типа [взаимное преобразование VLQ и натуральных чисел] в Git, там на самом деле специально реализованный алгоритм: биективный метод подсчета (биективная нумерация), в основном Как сделать сопоставление один к одному, чтобы избежать явления избыточности многобайтового VLQ, это немного отличается от темы этой статьи, не слишком расширяйтесь, порекомендуйте статью«Глубокое изучение базового формата Git: смещение натуральных чисел VLQ»

Расширение два: вJavaScriptКак реализовать кодировку VLQ в ?
/**如何对数值进行 VLQ 编码 * 1. 将数值改写成二进制形式 10001001 * 2. 七位一组做分组，不足的补 0 * 3. 最后一组开头补 0，其余补 1 * 4. 拼接 得出编码 * @param {*} num  */function encodeForVLQ(num) {    let binary = num.toString(2);    let padded = binary.padStart(Math.ceil(binary.length / 7) * 7, '0');    let groups = padded.match(/\d{7}/g);     groups = groups.map((group,index)=>{          let pre = (index==0 && groups.length > 1?'1':'0')          return pre + group;      });    let vlqCode = groups.join('');    return vlqCode}console.log(encodeForVLQ2(7));console.log(encodeForVLQ2(1200));

На данный момент мы завершили понимание процесса кодирования VLQ, но мы видим, что вывод представляет собой двоичное число, и если мы хотим получить строку, вам нужно использоватьBASE64 vlqкодирование обработано

Кодирование Base-VLQ

Как следует из названия, на самом деле это комбинация кодировки VLQ и кодировки base64. Однако между VLQ и VLQ есть несколько различий, которые необходимо отметить.

  • Base64 VLQ должен иметь возможность представлять отрицательные числа, поэтому последний бит первой единицы используется в качестве бита знака.
  • В Base64 VLQ, поскольку он соответствует base64, поэтому изменитеvlqНастройка 7-битной группы изменяется на 5-битную группу, а последовательные биты, установленные как старший бит, равны ровно шести.
что это такое?

После кодирования VLQ числа используйте символы base64 для представления результата кодирования VLQ.

Почему оно появляется?

Учитывая удобочитаемость файла отображения и обработку текстового программного обеспечения, двоичный файл, преобразованный с помощью VLQ, должен быть представлен печатными символами.

Как ты сделал это?

Примерно аналогично логике обработки кодирования VLQ, все они группируются, а затем используют старший бит для обозначения непрерывности.Наиболее важное отличие заключается в том, чтоbase64-vlqОтрицательные числа должны быть представлены, поэтому последний бит первой единицы используется в качестве бита знака.

  • В base64 измените единицу хранения VLQ с 8 btye на 6, что соответствует формату хранения base64.

  • Для положительного и отрицательного правила кодирования устанавливают последний бит первой единицы для представления положительных и отрицательных чисел, нулевого положительного и одного отрицательного;

    • Здесь следует отметить, почему он называется [первый блок], потому что всего имеется шесть битов, если один удалить, чтобы указать непрерывность, а другой указывает положительное и отрицательное, диапазон, который может быть представлен, составляет [-15 , 15], если число слишком велико, то необязательно указывать положительные и отрицательные значения, если для описания не первой единицы требуется несколько единиц, поэтому требуется только самый старший бит, чтобы указать, завершена ли она.

  • Просто сохраните символы base64, соответствующие каждой единице VLQ.

Например

Для чисел 7 и 1200 и -7, если вы используетеbase64-VLQКак они должны быть выражены?

количество бинарный
7 111
1200 10010110000
Во-первых, на 7
  • Имеется только одна единица, и естественный старший бит равен 0;
  • положительное число, поэтому последняя цифра 0;
  • В конце всего три бита, поэтому ведущие биты заполнены 0;

Результирующее кодирование VLQ:001110;

Во-вторых, за 1200

Сначала выполните первый блок

  • Несколько единиц, поэтому непрерывны, старший бит равен 1;
  • положительное число, поэтому последняя цифра 0;
  • Существует более одной единицы, поэтому для первой единицы выньте четыре числа сзади в двоичном коде и заполните четыре бита.

Тогда состав первого полученного звена будет100000

завершить второй блок

  • Или залито, значит контакт, старший бит 1
  • Это не первая единица, поэтому независимо от того, положительная она или отрицательная, просто выньте пять чисел и заполните пятью цифрами.

Состав полученного второго блока:101011

Пример нажимается вниз, и окончательный результат100000101011000010

согласно сmappingполучение информации

Зная, откуда взялся файл сопоставления, ключ в том, что наши общие сценарии похожи наAAAA,IAAIA,EAAE,CAAN,CACIC,EAAE,CADN,CAEIC,EAAEФайл сопоставления, как мы можем получить информацию из него? Очень просто, лучше следовать методу кодирования, и видна реализация [расширения-декодирования].

Расширение: ВJavaScriptкак добитьсяbase64-VLQкодирование и декодирование?

Здесь реализован упрощенный вариант, на самом деле в настоящее времяbase64-vqlпакет обработки,адрес пакета npm для обработки vql, большинство его внутренних реализаций используют что-то вроде>>> |Битовые операции, такие как эта, не будут здесь слишком расширены.Если будет возможность опубликовать статью отдельно, идеи аналогичны.

кодирование
let base64 = [    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',    'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',    'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',    'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '/'];	/**如何对数值进行 bae64-VLQ 编码 * 1. 将数值改写成二进制形式  * 2. 五位一组做分组，不足的补 0，并将组倒序排序 * 3. 最后一组开头补 0，其余补 1 * 4. 转 bae64 进制，即通过对应索引在 base64 码表中取值  * @param {*} num  */function encode(num) {    //1. 改写成二进制形式,如果是负数的话是绝对值转二进制    let binary = (Math.abs(num)).toString(2);    //2.正数最后边补 0,负数最右边补 1,127 是正数,末位补 0     binary = num >= 0 ? binary + '0' : binary + '1';    //3.五位一组做分组，不足的补 0     let zero = 5 - (binary.length % 5);    if (zero > 0) {        binary = binary.padStart(Math.ceil(binary.length / 5) * 5, '0');    }    let parts = [];    for (let i = 0; i < binary.length; i += 5) {        parts.push(binary.slice(i, i + 5));    }    //4. 将组倒序排序     parts.reverse();    //5. 最后一组开头补 0,其余补 1    for (let i = 0; i < parts.length; i++) {        if (i === parts.length - 1) {            parts[i] = '0' + parts[i];        } else {            parts[i] = '1' + parts[i];        }    }    //6. 转 bae64 进制，即通过对应索引在 base64 码表中取值     let chars = [];    for (let i = 0; i < parts.length; i++) {        chars.push(base64[parseInt(parts[i], 2)]);    }    return chars.join('')}let result = encode(137);console.log(result);
расшифровка
let base64 = [    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',    'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',    'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',    'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '/'];function getValue(char) {    let index = base64.findIndex(item => item == char);//先找这个字符的索引    let str = (index).toString(2);//索引转成 2 进制    str = str.padStart(6, '0');//在前面补 0 补到 6 位    //最后一位是符号位,正数最后一位是 0,负数最后一位为 1    let sign = str.slice(-1)=='0'?1:-1;    //最后一组第一位为 0,其它的第一位为 1    str = str.slice(1, -1);    return parseInt(str, 2)*sign;}function decode(values) {    let parts = values.split(',');//分开每一个位置    let positions = [];    for(let i=0;i<parts.length;i++){        let part = parts[i];        let chars = part.split('');//得到每一个字符        let position = [];        for (let i = 0; i < chars.length; i++) {            position.push(getValue(chars[i]));//获取此编写对应的值        }        positions.push(position);    }    return positions;}let positions = decode('AAAA,IAAIA,EAAE,CAAN,CACIC,EAAE,CADN,CAEIC,EAAE');//后列,哪个源文件,前行,前列,变量 console.log('positions',positions);let offsets = positions.map(item=>[item[2],item[3],0,item[0],]);console.log('offsets',offsets);let origin = {x:0,y:0};let target = {x:0,y:0};let mapping=[];for(let i=0;i<offsets.length;i++){    let [originX,originY,targetX,targetY] = offsets[i];    origin.x += originX;    origin.y += originY;    target.x += targetX;    target.y += targetY;    mapping.push(`[${origin.x},${origin.y}]=>[${target.x},${target.y}]`);}console.log('mapping',mapping);

Заинтересованные друзья могут использоватьадрес пакета npm для обработки vqlУбедитесь сами

# npm i vlq const vlq = require('vlq');console.log(vlq.encode( 137 )); // yIconsole.log(vlq.decode( 'yI' )); // 137

оbase64-vlqконец

Слишком далеко,base64-VLQКодировка .Ну, ленивые люди меняют мир.

конец

"Видеть" очень нравится.Кажется много раз.Одна из них "Сила реальности".Общая идея - "убрать декоративность и мастерство" при съемке, и действительно ценные вещи выявятся естественным образом. Выходите, в процессе исследования принципа sourceMap я очень "резко" подумал об этом предложении. Много раз мы спешим за высокими и высокоуровневыми существительными, но редко задумываемся о таких какsourcemapТакое "хардкорное" знание, которое на самом деле решает болевые точки, проходит мимо ушей, и когда я вижу кодировку, то устаю и не люблю ее.Честно говоря, если бы не набор доставки дата, мне пришлось бы отложить как минимум на неделю или две, потому что просмотр кодирования действительно раздражает и редко используется, но после настойчивости я нашел много таких вещей, какbase64,ASCIIТакие точки знаний соединены в линию, «прошли», наверное, многие мелкие партнеры более или менее ощутили такое прозрение, на самом деле, даже если передние известные новые точки знаний появляются бесконечным потоком, мы все равно можем видеть много общего "Дао", которое тонет под айсбергом, и это, надо успокоиться и подумать.

Старшая

Вербовка WeDoctor, достопримечательность Ханчжоу, большая команда, большие боссы, красивые девушки и сестры, приходите быстро (большие боссы оставляют сообщение, я пойду искать людей)

Refs & Recommend Readings:

An Introduction to Source Maps
Стандартное справочное руководство по JavaScript (альфа-версия)
адрес пакета npm для обработки vql
Подробное объяснение набора символов ASCII
MDN: кодирование и декодирование Base64
Руан Ифэн: заметки Base64
Ruan Yifeng: Подробное объяснение исходной карты JavaScript
официальный сайт юникода
rfc4648.txt

задействованные инструменты

адрес пакета npm для обработки vql

base64vlq онлайн конвертация

口腔溃疡.gif

Категории