Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips

Source Maps 101

by
Read Time:10 minsLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

Здесь вступают в игру source maps, указывая точное сопоставление в нашем production коде на исходный авторский код. В этом вводном учебнике мы рассмотрим простой проект и пропустим его через различные компиляторы JavaScript, чтобы поиграться с source maps в браузере.


Что такое Source Maps?

Source Maps предлагают не зависимый от языка способ сопоставления production кода с исходным кодом.

Исходные карты предлагают не зависимый от языка способ сопоставления производственного кода с исходным кодом, который был создан в вашей среде разработки. Когда мы в конечном счете смотрим на базу кода, сгенерированную и подготовленную к production, становится очень сложно найти то место, где происходит сопоставление строк с нашим исходным авторским кодом. Однако во время компиляции source map хранит эту информацию, поэтому, когда мы запрашиваем строку, она вернет нам точное местоположение в исходном файле! Это дает огромное преимущество разработчику, поскольку код становится читаемым и даже отлаживается!

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


Браузеры

Обратите внимание, что при написании этой статьи Chrome (версия 23) поддерживает карты исходников JavaScript и даже карты SASS. Firefox также должен получить поддержку в ближайшем будущем, так как в настоящее время он находится в активной стадии разработки. Итак, давайте посмотрим, как мы можем использовать карты источников в браузере!

Source maps в Chrome

Во-первых, мы должны включить поддержку в Chrome, выполнив следующие простые шаги:

  • Откройте инструменты разработчика Chrome: View -> Developer -> Инструменты для разработчиков
  • Нажмите кнопку «Настройки» в нижнем правом углу
  • Выберите «Общие» и выберите «Включить source maps»,

Настройка

Если вы хотите продвигаться вместе с этой статьей, загрузите демоверсию и откройте каталог «start». Файлы и структура каталогов довольно простые, с некоторым простым JavaScript внутри scripts/script.js. Вы должны иметь возможность открывать index.html и даже добавлять некоторые названия цветов CSS или шестнадцатеричные значения, чтобы изменить цвет фона.

Просмотрите простые файлы сценариев в простых JavaScript, TypeScript или CoffeeScript. Используя различные компиляторы JavaScript, мы создадим готовую для production версию, а также сгенерируем соответствующие карты.

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

  1. Closure Compiler
  2. GruntJS с JSMin
  3. Uglifyjs 2
  4. CoffeeScript и Redux
  5. TypeScript

Вариант A: компилятор Closure

Closure Compiler от Google - это инструмент для оптимизации JavaScript. Он делает это, анализируя ваш код, удаляя ненужные биты, а затем минимизируя остальные. Кроме того, он также может генерировать карты.

Для создания оптимизированной версии script.js, используя компилятор Closure, сделаем следующие шаги:

  1. Загрузите последний компилятор Closure.
  2. Перенесите файл, compiler.jar, в каталог, scripts.
  3. Перейдите в каталог scripts из командной строки и выполните следующее, чтобы создать оптимизированный готовый к production файл script.closure.js:
  4. Убедитесь, что index.html теперь связан с вновь созданным файлом, scripts/script.closure.js, раскомментируя вариант A.

Когда мы открываем index.html в браузере и перейдем к Source панели в средствах разработчика, то будет ссылка только на оптимизированную версию script.closure.js; у нас нет способа вернуть соотношение к нашему оригинальному, исходному файлу. Давайте создадим файл карты, выполнив следующую команду в каталоге scripts:

Обратите внимание, что Closure Compiler использует два варианта: --create_source_map и --source_map_format для создания файла карты script.closure.js.map с версией 3. Затем добавьте URL-адрес исходного URL-адреса в конец скомпилированного файла сценария, script.closure.js, так что оптимизированный файл содержит информацию о местоположении карты:

Теперь, когда мы просматриваем проект в браузере, в директории «scripts» под панелью Source инструментов разработчика будет показан как исходный файл, так и оптимизированная версия script.closure.js. Хотя браузер, конечно же, использует оптимизированный файл, на который мы первоначально ссылались в index.html, карты позволяют нам создать связь с исходным файлом.

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


Вариант B: задача GruntJS для JSMin

Если вы уже используете Grunt.js для процессов сборки, вам понадобится плагин Grunt для карт JSMin. Он не только оптимизирует ваш код, но также создаст карту!

Следующие шаги продемонстрируют, как создать оптимизированную версию script.js с плагином Grunt JSMin:

  1. установите Grunt.js и инициируйте gruntfile, grunt.js, в корне каталога:
  2. Установите Grunt-плагин grunt-jsmin-sourcemap; когда вы это сделаете, будет создан каталог с именем node_modules/grunt-jsmin-sourcemap:
  3. Отредактируйте вновь созданный файл grunt.js, чтобы он содержал только задачу jsmin-sourcemap - чтобы все было как можно проще.
  4. Вернитесь в командную строку и запустите grunt; это выполнит задачу jsmin-sourcemap, поскольку задание по умолчанию указано как таковое в файле grunt.js:
  5. В файле созданной карты, script.grunt-jsmin.js.map, убедитесь, что источником является "sources":["script.js"].
  6. Раскомментируйте вариант B для ссылки на вновь созданный файл, script.grunt-jsmin.js, в index.html, и откройте его в браузере.

С Grunt и плагином, jsmin-sourcemap, процесс сборки создал два файла: оптимизированный файл сценария с URL-адресом исходного источника, а также карту. Для просмотра всех их в браузере вам потребуются они оба.


Вариант C: UglifyJSё

UglifyJS2 - это еще один парсер JavaScript, minfier и компрессор. Подобно двум альтернативам выше, UglifyJS2 создаст оптимизированный файл сценария, добавленный с URL-адресом исходного источника, а также файл карты, который будет содержать сопоставление с исходным файлом. Чтобы использовать UglifyJS, выполните следующую команду в командной строке каталога «start»:

  1. Установите модуль NPM, uglify-js, локально; будет создан каталог node_module/uglify-js.
  2. Внутри каталога «scripts» мы выполним команду для создания оптимизированной версии, а также исходного файла с параметрами --source-map и --output, чтобы указать имя выходного файла.
  3. Наконец, убедитесь, что index.html правильно связан с скриптом script.uglify.js

Вариант D: CoffeeScript Redux

Для предыдущих трех вариантов нам потребовалась только одношаговая оптимизация - от исходного кода до оптимизированного JavaScript. Однако для таких языков, как CoffeeScript, нам нужен двухэтапный процесс: CoffeeScript > JavaScript > оптимизированный JavaScript. В этом разделе мы рассмотрим, как создавать многоуровневые карты с помощью CoffeeScript и компилятора CoffeeScript Redux.

Шаг 1: CoffeeScript для простого JavaScript

Перейдите в каталог «start» в командной строке. В следующих шагах мы сопоставим оптимизированный файл сценария с CoffeeScript:

  1. Установите CoffeeScript в качестве глобального пакета npm
  2. Скомпилируйте файл CoffeeScript, script.coffee.coffee, чтобы создать простую версию JavaScript, используя следующую команду:
  3. Установите CoffeeScript Redux:
  4. Затем мы создадим файл карты, script.coffee.js.map, который будет хранить информацию о преобразовании из сгенерированного JavaScript обратно в файл CoffeeScript:
  5. Убедитесь, что сгенерированный файл JavaScript, script.coffee.js, имеет URL-адрес исходного кода в конце со следующей строкой:
  6. Убедитесь, что файл карты, script.coffee.js.map, имеет правильный файл ссылки как "file":"script.coffee.coffee" и исходный файл как "sources":["script.coffee.coffee"]

Шаг 2: Обычный JavaScript для минификации-JavaScript

  1. Наконец, мы снова будем использовать UglifyJS, чтобы минимизировать сгенерированный JavaScript, а также создать карту. На этот раз это займет карту, чтобы мы могли вернуться к исходному файлу CoffeeScript. Выполните следующую команду в каталоге «scripts»:
  2. Наконец, убедитесь, что файл карты, script.coffee.min.js.map, имеет правильный ссылочный файл как "file":"script.coffee.min.js" и правильные источники как "sources":["script.coffee.coffee"].

Вариант E: TypeScript

TypeScript, как и CoffeeScript, также требует двухэтапный процесс: TypeScript > Обычный JavaScript > Мини-код JavaScript. Поскольку скрипт использует плагин jQuery, нам нужны два файла TypeScript, которые уже предоставлены: script.typescript.ts и jquery.d.ts.

Шаг 1: TypeScript для простого JavaScript

Перейдите в каталог «scripts» из командной строки и выполните следующую команду:

Вышеприведенная команда создаст новый файл JavaScript, с именем script.typescript.js, с url внизу: //@sourceMappingURL=script.typescript.js.map. С помощью этой единственной команды он также создаст файл карты, script.typescript.js.map.

Шаг 2: Обычный JavaScript для минифицированного JavaScript

Как и в примере с CoffeeScript, следующим шагом будет использование UglifyJS.

Наконец, убедитесь, что index.html ссылается на правильный файл сценария, scripts/script.typescript.min.js и откройте его в браузере!


Карты для SASS

Помимо JavaScript, в настоящее время Chrome также поддерживает карты SASS или SCSS. Для сопоставления исходника SASS исправьте несколько настроек в Chrome, а затем скомпилируем SASS в CSS с параметрами отладки:

  1. Прежде чем изменять какие-либо настройки, обратите внимание, что при проверке элемента из инструментов разработчика он будет показывать только ссылку на файл CSS. Это не слишком полезно.
  2. Перейдите в chrome://flags/.
  3. Включите эксперименты в инструментах разработчика.
  4. Откройте Инструменты Dev> Настройка> Эксперименты> Проверьте «Поддержка SASS».
  5. Скомпилируйте SASS с последующими параметрами отладки в каталоге «styles». Это добавит каждый набор правил CSS с помощью команды @media -sass-debug-info, которая будет содержать информацию о имени файла и номере строки.
  6. Обязательно перезапустите инструменты разработчика и обновите страницу.
  7. Теперь, когда мы проверяем элемент, мы можем получить доступ к исходному файлу SASS!

Помимо просто просмотра файла SASS, если вы используете LiveReload в фоновом режиме и вносите изменения в файл SASS, страница также будет обновляться, чтобы отразить изменения. Например, давайте откроем проект в Firefox и проверим страницу, используя расширение Firebug.


Информация на карте

Если мы просмотрим любой из файлов *.map, он будет содержать информацию о сопоставлении из исходного файла в оптимизированный файл. Структура карты обычно находится в формате JSON, используя спецификации версии 3. Обычно он содержит следующие пять свойств:

  1. version: номер версии карты - обычно «3.»
  2. file: имя оптимизированного файла.
  3. sources: Имена исходных файлов.
  4. names: Символы, используемые для сопоставления.
  5. mappings: отображение данных.

Дополнительные ресурсы

Карты по-прежнему очень активно развиваются, но уже есть некоторые большие ресурсы, доступные в Интернете. Обязательно рассмотрите следующие, если вы хотите узнать больше.


Заключение

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.