What is javascript map file

Как использовать исходные карты JavaScript (файлы .map)?

Недавно я видел файлы с расширением .js.map , поставляемые с некоторыми библиотеками JavaScript (например, Angular), и это вызвало у меня несколько вопросов:

• Для чего это нужно? Почему ребята из Angular заботятся о доставке файла .js.map ?
• Как я (как разработчик JavaScript) могу использовать angular.min.js.map ?
• Стоит ли мне заботиться о создании файлов .js.map для моих приложений JavaScript?
• Как это создается? Я взглянул на angular.min.js.map , и он был заполнен строками странного формата, поэтому я предполагаю, что он не создается вручную.

Файлы .map предназначены для js и css (а теперь ts ) файлы, которые были уменьшены. Они называются SourceMaps. Когда вы уменьшаете файл, например файл angular.js, он берет тысячи строк красивого кода и превращает его в несколько строк уродливого кода. Надеюсь, когда вы отправляете свой код в рабочую среду, вы используете минимизированный код вместо полной неминифицированной версии. Когда ваше приложение находится в рабочей среде и содержит ошибку, карта источников поможет принять ваш уродливый файл и позволит вам увидеть исходную версию кода. Если бы у вас не было исходной карты, то любая ошибка в лучшем случае казалась бы загадочной.

То же самое для файлов CSS. После того, как вы возьмете файл SASS или LESS и скомпилируете его в CSS, он будет совсем не похож на исходную форму. Если вы включите исходные карты, то вы сможете увидеть исходное состояние файла вместо измененного состояния.

Итак, чтобы ответить на ваши вопросы по порядку:

• Для чего это? Чтобы отменить ссылку на некорректный код
• Как разработчик может его использовать? Вы используйте его для отладки производственного приложения. В режиме разработки вы можете использовать полную версию Angular. В производственной среде вы должны использовать уменьшенную версию.
• Стоит ли мне заботиться о создании файла js.map? Если вы заботитесь о том, чтобы облегчить отладку производственного кода , тогда да, вы должны это сделать.
• Как он создается? Он создается во время сборки. Существуют инструменты сборки, которые могут создавать ваш файл .map, как и другие файлы. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

Просто хотел сосредоточиться на последней части вопроса; Как создаются файлы исходной карты? перечисляя известные мне инструменты сборки, которые могут создавать исходные карты..

1. Grunt: используя плагин grunt-contrib-uglify
2. Gulp: используя плагин gulp-uglify
3. Закрытие Google: с использованием параметра —create_source_map

Источник

What is a JavaScript map file?

map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called source maps. When you minify a file, like the angular. js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code.

What is the purpose of a .map file?

The main purpose of map file is used to link the css source code to less source code in the chrome dev tool.

What is a js map file TypeScript?

map files are source map files that let tools map between the emitted JavaScript code and the TypeScript source files that created it. Many debuggers (e.g. Visual Studio or Chrome’s dev tools) can consume these files so you can debug the TypeScript file instead of the JavaScript file.

How do I load a source map?

1. Open Debugger.
2. Right-click in source code area.
3. Select “Add source map…”
4. Enter URL to source map file. if browser is able to download it and process it then sources appear as entry in source tree.

Are js map files required?

The source map file will only be downloaded if you have source maps enabled and your dev tools open. You’ll also need to upload your original files so the dev tools can reference and display them when necessary.

What are map files?

A MAP file is a game map created for games developed with one of the Quake engines. It is saved in a human-readable text-based format. MAP files are uncompiled but can be compiled into a . DIF format for development. The resulting map files are used for Torque games, which target PC, mobile, and console platforms.

Are JS MAP files required?

Is a MAP file a extension?

MAP files are uncompiled but can be compiled into a . BSP binary map file for use in games such as Half-Life, Quake, Quake 2, and Quake 3. MAP files can be built using several map editors, including Valve Hammer Editor, which also compiles the map into the target BSP format.

What is jQuery map file?

What is jQuery Source Map? As the name suggests, it consists of a whole bunch of information that can be used to map the code within a compressed file back to it’s original source . It is used by browser’s debugger to help developers debug the minified version of script file.

What is a Sourcemap file?

A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger. include a comment in the transformed file, that points to the source map.

How do I create a .map file?

Select Tools > Generate, or press Ctrl+G. The Generate Mapping File dialog appears. Enter the reader and writer parameters you want to use for the mapping file. Parameters:When you select certain source formats, the Parameters button becomes available.

Источник

Source Maps: быстро и понятно

Механизм Source Maps используется для отображения исходных текстов программы на сгенерированные на их основе скрипты. Несмотря на то, что тема не нова и по ней уже написан ряд статей (например эта, эта и эта) некоторые аспекты все же нуждаются в прояснении. Представляемая статья представляет собой попытку упорядочить и систематизировать все, что известно по данной теме в краткой и доступной форме.

В статье Source Maps рассматриваются применительно к клиентской разработке в среде популярных браузеров (на примере, DevTools Google Chrome), хотя область их применения не привязана к какому-либо конкретному языку или среде. Главным источникам по Source Maps является, конечно, стандарт, хотя он до сих пор не принят (статус — proposal), но, тем не менее, широко поддерживается браузерами.

Работа над Source Maps была начата в конце нулевых, первая версия была создана для плагина Firebug Closure Inspector. Вторая версия вышла в 2010 и содержала изменения в части сокращения размера map-файла. Третья версия разработана в рамках сотрудничества Google и Mozilla и предложена в 2011 (последняя редакция в 2013).

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

Для работы Source Maps необходимы следующие файлы:

• собственно сгенерированный JavaScript-файл
• набор файлов с исходным кодом использовавшийся для его создания
• map-файл отображающий их друг на друга

Map-файл

Вся работа Source Maps основана на map-файле, который может выглядеть, например, так:

Обычно, имя map-файла складывается из имени скрипта, к которому он относится, с добавлением расширения «.map», bundle.js — bundle.js.map. Это обычный json-файл со следующими полями:

• «version» — версия Source Maps;
• «file» — (опционально) имя сгенерированного файла, к которому относится текущий map-файл;
• «sourceRoot» — (опционально) префикс для путей к файлам-исходникам;
• «sources» — список путей к файлам-исходникам (разрешаются аналогично адресам src тега script, можно использовать file://.);
• «names» — список имен переменных и функций, которые подверглись изменению в сгенерированном файле;
• «mappings» — координаты отображения переменных и функций исходных файлов на сгенерированный файл в формате Base64 VLQ;
• «sourcesContent» — (опционально) в случае self-contained map-файла список строк, каждая из которых содержит исходный текст файла из sources;

Загрузка Source Maps

Для того, чтобы браузер загрузил map-файл может быть использован один из следующих способов:

• JavaScript-файл пришел с HTTP-заголовком: SourceMap: (ранее использовался ныне устаревший X-SourceMap: )
• в сгенерированном JavaScript-файле есть особый комментарий вида:

//# sourceMappingURL= (для CSS /*# sourceMappingURL= */) 

Таким образом, загрузив map-файл браузер подтянет и исходники из поля «sources» и с помощью данных в поле «mappings» отобразит их на сгенерированный скрипт. Во вкладке Sources DevTools можно будет найти оба варианта.

Для указания пути может использоваться пседопротокол file://. Также, в может быть включено все содержимое map-файла в кодировке Base64. В терминологии Webpack подобные Source Maps названы inline source maps.

//# sourceMappingURL=data:application/json;charset=utf-8;base64,

Следует заметить, что map-файлы не являются частью веб-страницы, поэтому вы не увидите информации об их загрузке во вкладке Network DevTools. Тем не менее, если в сгенерированном файле находится ссылка на несуществующий map-файл, в Console DevTools будет предупреждение вида: «DevTools failed to load SourceMap: . ». Также при наличии ссылки на несуществующий исходник, вместо него будет сообщение вида: «Could not load content for . ».

Self-contained map-файлы

Код файлов-исходников можно включить непосредственно в map-файл в поле «sourcesContent», при наличии этого поля необходимость в их отдельной загрузке отпадает. В этом случае названия файлов в «sources» не отражают их реального адреса и могут быть совершенно произвольными. Именно поэтому, вы можете видеть во вкладке Sources DevTools такие странные «протоколы»: webpack://, ng:// и т.д

Mappings

Сущность механизма отображения состоит в том, что координаты (строка/столбец) имен переменных и функций в сгенерированном файле отображаются на координаты в соотвествующем файле исходного кода. Для работы механизма отображения необходима следующая информация:

(#1) номер строки в сгенерированном файле;
(#2) номер столбца в сгенерированном файле;
(#3) индекс исходника в «sources»;
(#4) номер строки исходника;
(#5) номер столбца исходника;

Все эти данные находятся в поле «mappings», значение которого — длинная строка с особой структурой и значениями закодированными в Base64 VLQ.

Строка разделена точками с запятой (;) на разделы, соответствующие строкам в сгенерированном файле (#1).

Каждый раздел разделен запятыми (,) на сегменты, каждый из которых может содержать 1,4 или 5 значений:

• номер столбца в сгенерированном файле (#2);
• индекс исходника в «sources» (#3);
• номер строки исходника (#4);
• номер столбца исходника (#5);
• индекс имени переменной/функции из списка «names»;

Каждое значение представляет собой число в формате Base64 VLQ. VLQ (Variable-length quantity) представляет собой принцип кодирования сколь угодно большого числа с помощью произвольного числа двоичных блоков фиксированной длины.

В Source Maps используются шестибитные блоки, которые следуют в порядке от младшей части числа к старшей. Старший 6-й бит каждого блока (continuation bit) зарезервирован, если он установлен, то за текущим следует следующий блок относящийся к этому же числу, если сброшен — последовательность завершена.

Поскольку в Source Maps значение должно иметь знак, для него также зарезервирован младший 1-бит (sign bit), но только в первом блоке последовательности. Как и ожидается, установленный sign бит означает отрицательное число.

Таким образом, если число можно закодировать единственным блоком, оно не может быть по модулю больше 15 (1111₂), так как в первом шестибитном блоке последовательности два бита зарезервированы: continuation бит всегда будет сброшен, sign бит будет установлен в зависимости от знака числа.

Шестибитные блоки VLQ отображаются на кодировку Base64, где каждой шестибитной последовательности соответствует определенный символ ASCII.

Декодируем число mE. Инверсируем порядок, младшая часть последняя — Em. Декодируем числа из Base64: E — 000100, m — 100110. В первом отбрасываем старший continuation бит и два лидирующих нуля — 100. Во втором отбрасываем старший continuation и младший sign биты (sign бит сброшен — число положительное) — 0011. В итоге получаем 100 0011₂, что соответствует десятичному 67.

Можно и в обратную сторону, закодируем 41. Его двоичный код 101001₂, разбиваем на два блока: старшая часть — 10, младшая часть (всегда 4-битная) — 1001. К старшей части добавляем старший continuation бит (сброшен) и три лидирующих нуля — 000010. К младшей части добавляем старший continuation бит (установлен) и младший sign бит (сброшен — число положительное) — 110010. Кодируем числа в Base64: 000010 — C, 110010 — y. Инверсируем порядок и, в итоге, получаем yC.

Для работы с VLQ весьма полезна одноименная библиотека.

Источник