Исходные карты 101

22 января 2018

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

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


Что такое исходные карты?

Исходные карты предлагают язык-агностический способ сопоставления производственного кода с исходным кодом, который был автором.

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

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


Браузеры

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

Исходные карты в Chrome

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

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

Setup

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

$ tree
.
├── index.html
├── scripts
│   ├── jquery.d.ts
│   ├── script.coffee.coffee
│   ├── script.js
│   └── script.typescript.ts
└── styles
    ├── style.css
    └── style.sass

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

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

    Closure Compiler GruntJS с JSMin Uglifyjs 2 CoffeeScript и Redux TypeScript

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

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

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

    Загрузите последний компилятор Closure. Перенесите файл, compiler.jar, в каталог, скрипты. Перейдите в каталог, скрипты из командной строки и выполните следующее, чтобы был создан оптимизированный, готовый к созданию файл script.closure.js: 1java -jar compiler.jar --js script.js --js_output_file script.closure.js Убедитесь, что index.html теперь связан с вновь созданным файлом, скриптами script.closure.js, с помощью uncommenting Option A.

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

java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format=V3 --js_output_file script.closure.js

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

//@ sourceMappingURL=script.closure.js.map

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

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


Вариант B: GruntJS Task для JSMi

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

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

    установить Grunt.js и запустить файл grunt, grunt.js, в корне каталога «start»: 123456 $ npm install -g grunt $ npm просмотр grunt versiopm http GET https: registry.npmjs.org gruntnpm http 200 https: registry.npmjs.org grunt0.3.17 $ grunt init: gruntfile Установить плагин Grunt gunt-jsmin-sourcemap; когда вы это сделаете, будет создан каталог, называемый node_modules grunt-jsmin-sourcemap: 1 $ npm install grunt-jsmin-sourcemap. Редактировать вновь созданный файл grunt.js, чтобы содержать только задачу jsmin-sourcemap - чтобы все было так просто, как возможное. 01020304050607080910111213module.exports = function (grunt) {grunt.loadNpmTasks ('grunt-jsmin-sourcemap'); grunt.initConfig ({'jsmin-sourcemap': {all: {src: ['scripts script.js'], dest: 'scripts script.jsmin-grunt.js', destMap: 'scripts script.jsmin-grunt.js.карта'}}}); grunt.registerTask ('default', 'jsmin-sourcemap');}; Вернитесь в командную строку и запустите grunt; это выполнит задачу jsmin-sourcemap, поскольку задание по умолчанию указано как таковое в файле grunt.js: 1234 $ gruntRuing «jsmin-sourcemap: all» (jsmin-sourcemap) task Выполнено без ошибок. В файле созданной исходной карты, script.grunt-jsmin.js.map, убедитесь, что источником являются «источники»: ["script.js"]. Uncomment Option B для ссылки на вновь созданный файл, script.grunt-jsmin.js, в index.html, и открыть в браузере.

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


Вариант C: UglifyJS

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

    Установите модуль NPM, uglify-js, локально; будет создан каталог, называемый nocde_module uglify-js. 1234 $ npm install uglify-js $ npm view uglify-js version2.2.3 $ cd scripts В каталоге «scripts» мы выполним команду для создания оптимизированной версии, а также исходный файл с параметрами, - source-map и --output, чтобы назвать выходной файл. 1uglifyjs --source-map script.uglify.js.map --output script.uglify.js script.js Наконец, убедитесь, что index.html правильно связан со скриптом script.uglify.js

Вариант D: CoffeeScript Redux

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

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

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

    Install CoffeeScript в качестве глобального пакета npm. Составьте файл CoffeeScript, script.coffee.coffee, чтобы создать версию обычного JavaScript, используя следующую команду: 1 $ coffee -c scripts script.coffee.coffee Установить CoffeeScript Redux: 12345 $ git clone https: github.com michaelficarra CoffeeScriptRedux.git coffee-redux $ cd coffee-redux $ npm install $ make -j test $ cd.. Затем мы создаст файл исходной карты, script.coffee.js.map, который будет хранить информацию о преобразовании из сгенерированного JavaScript обратно в файл CoffeeScript: 1 $ coffee-redux bin coffee --source-map -i scripts script.coffee. coffee> scripts script.coffee.js.map Убедитесь, что сгенерированный файл JavaScript, script.coffee.js, имеет URL-адрес исходного кода в конце строки со следующей строкой: 1 @ sourceMappingURL = script.coffee.js.map Убедитесь, что файл исходной карты, script.coffee.js.map, имеет правильный ссылочный файл как «fi le ":" script.coffee.coffee ", а исходный файл - как" источники ": [" script.coffee.coffee "]

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

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

Вариант E: TypeScript

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

Шаг 1: ТипScript для простого JavaScript

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

$ tsc script.typescript.ts -sourcemap

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

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

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

$ uglifyjs script.typescript.js -o script.typescript.min.js --source-map script.typescript.min.js.map --in-source-map script.typescript.js.map

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


Source Maps для SASS

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

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

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


Информация на исходной карте

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

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

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

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

Введение в исходные карты JavaScript Райаном Седдоном, камнями HTML5. Точка прерывания. Эпизод 3: Исходные карты JavaScript от команды разработчиков Google. Эпизод 2: исходные карты SASS с помощью команды разработчиков Google Developer Maps на языках, инструментах, статьях по источнику Карты с несколькими уровнями исходного кода с помощью CoffeeScript и TypeScript от Ryan Seddon Исходные карты Вариант версии 3