Как использовать исходные карты JavaScript (файлы .map)?

Недавно я видел файлы с расширением .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, он будет совсем не похож на исходную форму. Если вы включите исходные карты, то вы сможете увидеть исходное состояние файла вместо измененного состояния.

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

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

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

38

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

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

отредактировано 29 ноября ’19 в 13:06

ответил 02 ноя 2014, в 9:46

добавить комментарий |

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

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

36

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

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

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

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

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

, который подключит ваш файл .map .

Когда min.js и js.map готовы …

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

отредактировано 28 декабря 2018 в 18:59

Sunil Garg

9,2931111 золотых знаков8484 серебряных знака130130 бронзовых знаков

ответил 11 апреля ’16 в 16:50

добавить комментарий |

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

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

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

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

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

, который подключит ваш .map .

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

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

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

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

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

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

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

Импорт объектов карты из файла