Файлы javascript.map - исходные коды javascript

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

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

Ответы

Ответ 1

Файлы .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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

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

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

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

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