Файлы Javascript .map - исходные карты JavaScript

226

Недавно я видел файлы с расширением .js.map, поставляемые с некоторыми библиотеками JavaScript (например, Angular), и это только что вызвало несколько вопросов в моей голове:

  • Для чего? Почему ребята из Angular должны предоставить файл .js.map?
  • Как я могу (как разработчик JavaScript) использовать файл angular.min.js.map?
  • Должен ли я заботиться о создании файлов .js.map для моих приложений JavaScript?
  • Как он создается? Я взглянул на angular.min.js.map, и он был заполнен строк с форматированными в странном порядке, поэтому я предполагаю, что он не создан вручную.
Теги:
source-maps

5 ответов

322
Лучший ответ

Файлы .map предназначены для файлов js и css, которые были уменьшены. Они называются SourceMaps. Когда вы минимизируете файл, например, файл angular.js, он берет тысячи строк довольно кода и превращает его в несколько строк уродливого кода. Будем надеяться, что когда вы отправляете свой код на производство, вы используете сокращенный код вместо полной, незавершенной версии. Когда ваше приложение находится в производстве и имеет ошибку, sourcemap поможет взять ваш уродливый файл и позволит вам увидеть исходную версию кода. Если у вас не было исходной карты, тогда любая ошибка казалась бы загадочной в лучшем случае.

То же самое для файлов CSS. После того, как вы возьмете файл SASS или LESS и скомпилируете его в CSS, он не похож на оригинальную форму. Если вы включите sourcemaps, вы увидите исходное состояние файла вместо измененного состояния.

Итак, чтобы ответить на ваши вопросы по порядку:

  • Что это такое? Отменить ссылку на укрипцию кода
  • Как разработчик может использовать его?. Вы используете его для отладки производственного приложения. В режиме разработки вы можете использовать полную версию angular. В производстве вы использовали бы модифицированную версию.
  • Должен ли я беспокоиться о создании файла js.map? Если вы хотите облегчить отладку производственного кода, то да, вы должны это сделать.
  • Как он создается? Он создается во время сборки. Существуют инструменты построения, которые могут создавать ваш .map файл для вас, как и другие файлы. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

Надеюсь, это имеет смысл.

Поделиться
  • 14
    обратите внимание, что файл карты не будет отправлен до тех пор, пока вы его не назовете, вот что меня смутило stackoverflow.com/a/27196201/861487
  • 2
    Спасибо, Аарон, это одно из лучших описаний, которое я видел для sourcemap. Я использую его в gulp, и я почти все узнал о gulp и мне было интересно, как именно используются исходные карты, теперь я могу чувствовать себя уверенно, используя его. Большинство плагинов gulp теперь совместимы и против года назад, когда некоторые не были. Просто хотел сказать, что это имеет смысл!
Показать ещё 4 комментария
21

Просто хотелось сосредоточиться на последней части вопроса; Как создаются файлы исходных карт?, перечисляя инструменты сборки, которые я знаю, которые могут создавать исходные карты.

Я не знаю, есть ли другие инструменты, которые могут создавать исходные карты.

Поделиться
15

  • Как разработчик может использовать его? Я не нашел ответа на это в комментариях, вот как можно использовать:

    • Не связывайте ваш файл js.map в файле index.html(нет необходимости)
    • Инструменты Minifiacation (хорошие) добавляют комментарий к вашему .min.js файлу://# sourceMappingURL = yourFileName.min.js.map, , который будет подключать ваш .map файл

Когда файлы min.js и js.map готовы...

  1. Chrome: открытые инструменты для разработчиков, перейдите на вкладку "Источники", вы увидите папку "sources", где хранятся файлы с неограниченными приложениями
Поделиться
9

Файл карты сопоставляет unminified файл с мини файлом. Если вы внесете изменения в unminified файл, изменения будут автоматически отображены в мини-версию файла.

Поделиться
0

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

Для файлов Angular, с которыми я работал сегодня, нажмите

Ctrl-P и список исходных файлов появляется в небольшом окне.

Затем я просмотрю список, чтобы просмотреть файл, который я бы хотел проверить, и проверить, где эта проблема.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню