Про внедрение Source Map.
Для конечных пользователей (разработчиков) история оказалась сложной, особенно когда нужно было передавать карты из одного инструмента в другой (например от сборщика в минификатор).
Куда более сложной проблема была для разработчиков: как правильно генерировать карты и как учитывать предыдущие карты (от других инструментов)?
Первой и основной либой, которая умеет генерировать/декодировать карты кода, стала source-map от Mozilla. Насколько знаю, она и сегодня остается единственным решением для работы с Source Map в мире JavaScript – все тулы/либы используют ее. Это похоже на историю с SVGO (минификатор/оптимизатор SVG), у которого тоже нет альтернатив в своей области. Но в отличие от SVGO, source-map за почти 10 лет так и не добралась до версии 1.0. При этом у source-map ~250M (четверть миллиарда) скачиваний с npm в месяц, что в 7.5 раз больше чем у SVGO.
Но иметь либу для работы с Source Map мало, нужно еще правильно кодировать и преобразовывать карты. Достаточно много лет ушло на то, чтобы полечить детские проблемы формата и исправить баги в браузерах и инструментах. Первые годы были особенно болезненными: стреляло то тут то там. Например, если использовался сборщик + минификатор и это не работало в браузере правильно, то проблема могла быть в любом из трех звеньев. Отлаживать это было крайне сложно, в том числе и потому, что не было инструментов для отладки карт кода. Упоминаемый ранее source-map-visualization появился не сразу и не сильно помогал в первоначальном виде. Так же не хватало материала для разработчиков, как генерировать/преобразовывать карты кода. Поэтому копипастили фрагменты кода в свои проекты, у кого вроде как работало. Я сам так делал 🤗
Сам я внедрял карты кода в сборщике фреймворка basis.js, в CSSO и потом CSSTree. Ситуация с CSSO достаточно показательная: я хотел имплементировать карты кода одной из первых фич, когда стал мейнтенером CSSO. Но оказалось, что требуются доработки в парсере и в самой минификации (наверняка это было связано с локациями, но не помню деталей). Достаточно скоро стало понятно, что без полного рефакторинга не обойтись. Такая ситуация была не только у CSSO, потому внедрение карт кода обычно откладывалось в долгий ящик. Но в случае с CSSO, в какой-то степени, повезло – меня тогда увлек этот рефакторинг, и через несколько месяцев (это был проект в свободное время) все было готово к внедрению Source Map. Но оно не заводилось. Помню, я подглядывал в PostCSS и другие проекты, изучал код source-map, и все ради того чтобы разобраться как это работает. В итоге все получилось, но это не было так уж запросто и очевидно – больше победа упрямства, нежели системного подхода. Зато в комментариях к ишью получил "Thanks for all the awesome work!" от Пола Айриша, это было круто 🤘
Что примечательно, по картам кода можно найти статьи как они устроены, как настроить их в инструментах и чтобы все заработало в браузере. Но я пока не встречал статей про то, как правильно их генерировать. Но возможно мне просто не везло…
Все эти проблемы разработчиков инструментов приводили к тому, что и пользователям инструментов приходилось не просто. Если не работают карты кода, то либо баг у одного из инструментов, либо сам делаешь что-то не так...
Как бы то ни было, на сегодня ситуация более менее стабилизировалась. Появились решения бойлербплейты (вроде Create React App и др), где все уже настроено, либо можно подсмотреть как настроить самому. Сегодня один из первых запросов для любого нового инструмента про трансформацию кода – поддержка карт кода. Благо сейчас есть, где подсмотреть.
Для конечных пользователей (разработчиков) история оказалась сложной, особенно когда нужно было передавать карты из одного инструмента в другой (например от сборщика в минификатор).
Куда более сложной проблема была для разработчиков: как правильно генерировать карты и как учитывать предыдущие карты (от других инструментов)?
Первой и основной либой, которая умеет генерировать/декодировать карты кода, стала source-map от Mozilla. Насколько знаю, она и сегодня остается единственным решением для работы с Source Map в мире JavaScript – все тулы/либы используют ее. Это похоже на историю с SVGO (минификатор/оптимизатор SVG), у которого тоже нет альтернатив в своей области. Но в отличие от SVGO, source-map за почти 10 лет так и не добралась до версии 1.0. При этом у source-map ~250M (четверть миллиарда) скачиваний с npm в месяц, что в 7.5 раз больше чем у SVGO.
Но иметь либу для работы с Source Map мало, нужно еще правильно кодировать и преобразовывать карты. Достаточно много лет ушло на то, чтобы полечить детские проблемы формата и исправить баги в браузерах и инструментах. Первые годы были особенно болезненными: стреляло то тут то там. Например, если использовался сборщик + минификатор и это не работало в браузере правильно, то проблема могла быть в любом из трех звеньев. Отлаживать это было крайне сложно, в том числе и потому, что не было инструментов для отладки карт кода. Упоминаемый ранее source-map-visualization появился не сразу и не сильно помогал в первоначальном виде. Так же не хватало материала для разработчиков, как генерировать/преобразовывать карты кода. Поэтому копипастили фрагменты кода в свои проекты, у кого вроде как работало. Я сам так делал 🤗
Сам я внедрял карты кода в сборщике фреймворка basis.js, в CSSO и потом CSSTree. Ситуация с CSSO достаточно показательная: я хотел имплементировать карты кода одной из первых фич, когда стал мейнтенером CSSO. Но оказалось, что требуются доработки в парсере и в самой минификации (наверняка это было связано с локациями, но не помню деталей). Достаточно скоро стало понятно, что без полного рефакторинга не обойтись. Такая ситуация была не только у CSSO, потому внедрение карт кода обычно откладывалось в долгий ящик. Но в случае с CSSO, в какой-то степени, повезло – меня тогда увлек этот рефакторинг, и через несколько месяцев (это был проект в свободное время) все было готово к внедрению Source Map. Но оно не заводилось. Помню, я подглядывал в PostCSS и другие проекты, изучал код source-map, и все ради того чтобы разобраться как это работает. В итоге все получилось, но это не было так уж запросто и очевидно – больше победа упрямства, нежели системного подхода. Зато в комментариях к ишью получил "Thanks for all the awesome work!" от Пола Айриша, это было круто 🤘
Что примечательно, по картам кода можно найти статьи как они устроены, как настроить их в инструментах и чтобы все заработало в браузере. Но я пока не встречал статей про то, как правильно их генерировать. Но возможно мне просто не везло…
Все эти проблемы разработчиков инструментов приводили к тому, что и пользователям инструментов приходилось не просто. Если не работают карты кода, то либо баг у одного из инструментов, либо сам делаешь что-то не так...
Как бы то ни было, на сегодня ситуация более менее стабилизировалась. Появились решения бойлербплейты (вроде Create React App и др), где все уже настроено, либо можно подсмотреть как настроить самому. Сегодня один из первых запросов для любого нового инструмента про трансформацию кода – поддержка карт кода. Благо сейчас есть, где подсмотреть.