Что такое исходная карта?

Вы когда-нибудь задумывались о файлах .js.map или .ts.map внутри ваших проектов?

Если нет, то в следующие 3 минуты вы узнаете об этих маленьких ангелочках, благодаря которым вы сможете отлаживать свой код в Chrome или Firefox и / или анализировать покрытие кода.

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

Определение

Исходные карты - это файлы, которые создают соответствие между вашим исходным (исходным) кодом и вашим сгенерированным кодом. Другими словами, строка в вашем сгенерированном коде показывает, какая строка вашего исходного кода определяется исходными картами.

Пример

Давайте разберемся с приведенным выше определением на примере машинописного текста:

В настоящее время браузеры не поддерживают машинописный текст, поэтому, когда вы пишете код в .ts файле и запускаете команду tsc для компиляции этого файла; он в основном переводит код в javascript, который может быть выполнен в браузере.

В приведенном выше примере это всего лишь простой код, и сгенерированный JS может быть легко понят разработчиком. Проблема возникает, когда код TS сложен, тогда как сгенерированный JS намного сложнее, что становится действительно трудным для понимания разработчиком. И тогда на помощь приходят Source Maps, они сопоставляют наш сгенерированный код (JS) с исходным кодом (TS).

Вот пример от thecssninja.

Если вы хотите сгенерировать исходную карту для своего файла TS, просто поместите. sourcemap: true в compilerOptions вашего файла tsconfig.json. Изменение исходной карты на true приведет к созданию еще одного файла, как показано в примере ниже.

Сгенерированный файл исходной карты выглядит примерно так:

{“version”: 3,
“file”: “example.js”,
“sourceRoot”: “”,
“sources”: [
“example.ts”
],
“names”: [],
“mappings”: “AAAA;IAAA;IAUA,CAAC;IAPG,8BAAY,GAAZ,UAAa,IAAY;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAC1B,CAAC;IAED,8BAAY,GAAZ;QACI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;IAC1B,CAAC;IACL,cAAC;AAAD,CAAC,AAVD,IAUC”
}

Выше вы можете видеть, что исходная карта - это литерал объекта, содержащий много сложной информации:

  • Номер версии, на которой основана исходная карта
  • Имя файла сгенерированного кода (ваш мини-файл / комбинированный производственный файл)
  • sourceRoot позволяет добавлять к источникам структуру папок - это тоже метод экономии места
  • источники содержат все имена файлов, которые были объединены
  • names содержит все имена переменных / методов, которые встречаются в вашем коде.
  • И, наконец, свойство mappings - это то, где волшебство происходит с использованием значений Base64 VLQ (количество переменной длины). Здесь достигается реальная экономия места.

Анализ исходных карт

Свойство mappings представляет собой сверхбольшую строку. В этой строке есть точки с запятой (;), которые представляют номер строки в сгенерированном файле. Часть из строки сопоставлений:

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

Приведенная выше диаграмма AAgBC после дальнейшей обработки вернет 0, 0, 32, 16, 1 - 32 является битом продолжения, который помогает построить следующее значение 16. B, полностью декодированный в Base64, равен 1. Таким образом, важные используемые значения: 0, 0, 16, 1. Это позволяет нам узнать, что строка 1 (строки подсчитываются с помощью точки с запятой), столбец 0 сгенерированного файла сопоставляется с файлом 0 (массив файлов 0 - example.js), строка 16 в столбец 1.

Надеюсь, вы ознакомились с обзором исходных карт и используемых ими методов сопоставления :)