Яваскрипт.карты-файлы - карты исходный код JavaScript

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

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

5 ответов

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

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

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

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

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

386

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

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

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

22

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

    1. нет ваш js.файл карты в вашем индексе.html-файл (в этом нет необходимости)
    2. Minifiacation tools (хорошие) добавьте комментарий к вашему .минута.JS-файл: / / # sourceMappingURL=yourFileName.минута.js.карта,который соединит ваш .файл карты

когда минута.js и js.файлы карт готовы...

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

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

10

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

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

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

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

2