Статьи

Что такое Source Maps?

В последние несколько недель мы познакомили вас с некоторыми фреймворками JavaScript. Похоже, сейчас самое подходящее время, чтобы представить Source Maps вашему вниманию!

Если вы когда-либо мечтали о том, чтобы существовал простой способ отладки и чтения кода на стороне клиента после его объединения и минимизации, тогда Source Maps помогут сделать вашу жизнь намного проще! По сути, это существует для сопоставления объединенного / минифицированного файла обратно с незавершенным состоянием.

Поскольку Source Maps все еще находятся на ранних этапах, он может воспользоваться вашей помощью! Думаешь, ты мог бы использовать это с пользой? Как вы думаете, это достойно дальнейшего развития?

Начните с исходных карт

Для транскрипции JumpCast и тому подобного, посетите Learnable

JGB: Я здесь с Майклом Мифсудом, веб-разработчиком 99designs, и сегодня Майкл расскажет нам все о Source Maps. Можете ли вы начать с того, чтобы рассказать мне, что такое Source Maps?

Майкл: Карты источников — это просто название способа сопоставления двух эквивалентных файлов. Если у вас есть файл, который был предварительно обработан или иным образом изменен в другой файл, он может отобразить выведенный файл в исходный файл.

JGB: Для чего вы используете Source Maps?

Майкл: Основное использование для этого сейчас — отображение уменьшенного JavaScript в исходный код JavaScript. Таким образом, вы всегда можете добиться максимальной производительности, иметь возможность и контекст ваших исходных файлов, когда вы смотрите на них в отладчике.

JGB: Какие проблемы это решает точно?

Майкл: Хорошо, мы все знаем, что производственный код таинственным образом ломается, когда он никогда не ломается в процессе разработки. Попытка отладить 30 000 символов в длинном однострочном файле JavaScript — это кошмар. Теперь с Source Maps вы можете копаться в нем и видеть, как оно выглядело, когда вы его писали, и у вас было немного контекста.

JGB: Так почему же кто-то хочет иметь возможность отладки?

Майкл: Ты никогда не сможешь контролировать, когда что-то сломается Вы часто можете воспроизвести что-то в производстве, что вы не можете воспроизвести в процессе разработки. Так что это дает вам возможность в тот момент, с полным контекстом, выяснить, что пошло не так.

JGB: Так кто же может использовать Source Maps и какие навыки вам нужны для их использования?

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

Но делать это в производственной среде невероятно сложно. Если у вас есть Карты источников, вы сможете увидеть, что вы создали сами. Создание исходных карт само по себе немного хлопотно. Это должно быть сделано автоматически, это не то, что вы обычно делаете вручную. Так что если у вас есть команда DevOps или какой-то процесс развертывания, это будет частью этого.

JGB: Так что, если Source Maps настолько полезны, почему они в настоящее время не используются?

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

Но вы можете использовать сторонние библиотеки. Прямо сейчас он ограничен компилятором Google замыкания, который является библиотекой Java, и Java — это не то, что входит во многие современные веб-стеки или стеки веб-разработки. Поэтому от имени компании требуется время и усилия, чтобы добиться этого. Но есть люди, использующие это. Он будет расти по мере того, как станет более стабильным и простым в использовании.

JGB: Так какое будущее у Source Maps?

Майкл: Ну, сейчас основное применение — это сопоставление минимизированного JavaScript с обычным JavaScript, потому что это отображение один-к-одному. В идеале в будущем вы сможете отобразить любой предварительно обработанный файл из CoffeeScript или SASS в сгенерированный CSS или JavaScript. Сейчас это немного отстает, проблема в том, что больше нет однозначного сопоставления. В SASS есть такие вещи, как смешанные модули, в которых больше нет прямой межстрочной корреляции, и в этом есть логика. Это своего рода следующий шаг или следующая итерация Source Maps.