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

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

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

Эти .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. Grunt : с помощью плагинаgrunt-contrib-uglify
2. Gulp : используя плагинgulp-uglify
3. Google закрытие : с помощью параметра--create_source_map

• Как разработчик может использовать это?

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

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

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

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

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

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

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

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

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

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

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

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