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

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

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

5 ответов

Решение

.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

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

Источник

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

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

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

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

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

  1. Grunt: с помощью плагина grunt-contrib-uglify
  2. Gulp: используя плагин gulp-uglify
  3. Google закрытие: с помощью параметра --create_source_map

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

Источник

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

Источник

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

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

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

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

Источник
Другие вопросы по тегам