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

358

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

  • Для чего это? Почему ребята из Angular стараются доставить .js.mapфайл?
  • Как я могу (как разработчик JavaScript) использовать angular.min.js.mapфайл?
  • Должен ли я заботиться о создании .js.mapфайлов для моих приложений JavaScript?
  • Как это создается? Я посмотрел, angular.min.js.mapи он был заполнен странно отформатированными строками, поэтому я предполагаю, что он не был создан вручную.
javascript angularjs source-maps Мухаммед Реда
источник
1
html5rocks.com/en/tutorials/developertools/sourcemaps
Ананд

Ответы:

552

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

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

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

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

Я надеюсь это имеет смысл.

морозный
источник
20
обратите внимание, что файл карты не будет отправлен до тех пор, пока вы его не называете, вот что меня смутило stackoverflow.com/a/27196201/861487
Абделуахаб
2
Спасибо, Аарон, это одно из лучших описаний, которое я видел для sourcemap. Я использую его в gulp, и я почти все узнал о gulp и мне было интересно, как именно используются исходные карты, теперь я могу чувствовать себя уверенно, используя его. Большинство плагинов gulp теперь совместимы и против года назад, когда некоторые не были. Просто хотел сказать, что это имеет смысл!
Эрик Бишард
@frosty Отмена ссылки на код Uglified . Можете ли вы объяснить это, пожалуйста? Разве .js.mapфайл не поддерживает связь (часто называемую ссылкой ) между созданным вручную файлом и уменьшенным файлом?
Мохаммед Замир
1
@student говорит, что ссылка отменена, потому что я не хочу ссылаться на минимизированный код. Это минимизировано, и если я смотрю на это, это почти ничего не стоит. Но если бы он мог отменить ссылку на первоисточник, это было бы эпично. И это именно то, что является исходной картой. Надеюсь, это поможет.
морозно
Мне нравится этот ответ (спасибо), но у него 420 лайков ... я его сломал?
Эрик Рид
33

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

  1. Grunt : с помощью плагинаgrunt-contrib-uglify
  2. Gulp : используя плагинgulp-uglify
  3. Google закрытие : с помощью параметра--create_source_map
Мухаммед Реда
источник
31
  • Как разработчик может использовать это?

Я не нашел ответа на это в комментариях, вот как можно использовать:

  1. Не связывайте свой файл js.map с файлом index.html (в этом нет необходимости)

  2. Инструменты минифиакции (хорошие) добавляют комментарий к вашему файлу .min.js :

    // # sourceMappingURL = yourFileName.min.js.map

который соединит ваш файл .map .

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

  1. Chrome: откройте dev-tools , перейдите на вкладку Sources , вы увидите папку sources , в которой хранятся файлы неинициализированных приложений.
garfunkel61
источник
14

Файл карты отображает незавершенный файл в уменьшенный файл. Если вы внесете изменения в неинициализированный файл, изменения будут автоматически отражены в минимизированной версии файла.

Сурендра Ядав
источник
2

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

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

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

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

ротато поти
источник