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 або Менше і компілюєте його в CSS, він виглядає не так, як це оригінальна форма. Якщо ввімкнути вихідні карти, то ви можете побачити вихідний стан файлу замість модифікованого стану.

Отже, щоб відповісти на запитання, щоб:

• Для чого це? Для де-посилання невідомих кодів
• Як розробник може ним користуватися? Ви використовуєте його для налагодження виробничого додатка. У режимі розробки ви можете використовувати повну версію Angular. У виробництві ви б використовували мінімізовану версію.
• Чи повинен мені хвилюватися створенням файлу js.map? Якщо ви переймаєтесь тим, що зможете налагодити виробничий код простіше, тоді так, вам слід це зробити.
• Як це створюється? Він створюється в час збирання. Існують інструменти побудови, які можуть створювати ваш .map файл для вас, як і інші файли. https://github.com/gruntjs/grunt-contrib-uglify/isissue/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: відкрийте інструменти розробки , перейдіть на вкладку " Джерела" , ви побачите папку " Джерела" , де зберігаються файли не змінених програм.

Файл карти відображає немініфікований файл у мінімізований файл. Якщо ви внесете зміни в незмінений файл, зміни будуть автоматично відображені в мінімізованій версії файлу.

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

Для файлів Angular, з якими я працював сьогодні, натискаю

У невеликому вікні з'являється Ctrl-P і список оригінальних файлів.

Потім я можу переглянути список, щоб переглянути файл, який я хотів би оглянути і перевірити, де може бути проблема.