Ответ
Source Map — это файл, который связывает минифицированный или транспилированный код с исходным, помогая разработчикам отлаживать код в браузере. Он содержит информацию о соответствии строк, переменных и функций между исходным и сжатым кодом.
Пример настройки в Webpack:
module.exports = {
devtool: 'source-map', // Генерирует .map файл
// ...
};Особенности:
- Используется только в development-режиме (не включается в production)
- Поддерживает разные форматы (inline, external, eval)
- Работает с TypeScript, Babel, SASS/LESS
Пример структуры Source Map:
{
"version": 3,
"sources": ["original.js"],
"names": ["myFunction"],
"mappings": "AAAA,GAAG,CAAC..."
}Ответ 18+ 🔞
Ну ты представляешь, есть такая штука — Source Map. Это типа такой файл-шпион, который знает все твои грязные секреты. Ты там в коде наворотил, потом его сжал, обфусцировал, превратил в нечитаемую кашу, а этот файлик шепчет браузеру: «Слушай, дружок, вот эта вот строчка из этой мешанины на самом деле вот отсюда, из того красивого и понятного файла, который этот лох написал». И ты в девтулзах видишь не «a.min.js:1», а «MyBeautifulComponent.tsx:42», и понимаешь, где именно ты накосячил. Просто волшебство, ёпта!
Вот смотри, как это в том же Webpack’е включается, элементарно:
module.exports = {
devtool: 'source-map', // Вжух — и .map файл родился
// ...
};А теперь про важные детали, чтобы не обосраться:
- Эта фигня только для разработки, блядь! В продакшн её пихать — это как на собеседование в трусах прийти. Никто так не делает, если, конечно, ты не хочешь, чтобы все видели твой исходник, как он есть.
- Форматов этих карт — овердохуища: inline, external, eval. Каждый для своих извращений.
- Работает со всем, чем только можно: TypeScript, Babel, SASS — все эти ребята умеют такие карты генерировать.
А внутри этот файл выглядит примерно так, как будто его пьяный криптограф составлял:
{
"version": 3,
"sources": ["original.js"],
"names": ["myFunction"],
"mappings": "AAAA,GAAG,CAAC..." // Вот эта абракадабра и есть вся магия, в рот меня чих-пых!
}Короче, без этой штуки отладка после сборки — это как искать чёрную кошку в тёмной комнате, где её, сука, нет. А с ней — всё прозрачно, хоть и немного волшебно.