Отстраняване на грешки в JavaScript в производството с Source Maps
Такива инструменти се наричат транслатори, те превеждат код от един език на друг.
Тук на помощ идват кодовите карти или Source Maps.
Изходни карти
Карта на източника е JSON файл, който съдържа информация как да се преведе код обратно в изходен код.
Пример за кодова карта:
Вероятно няма да се налага да създавате тези файлове сами, но все пак си струва да разберете какво има вътре:
sourceMappingURL
За да може браузърът да определи откъде да зареди кодовата карта, трябва да има директива sourceMappingURL в края на преведения файл:
Забележка: Браузърите изтеглят и използват кодови карти само когато панелът за програмисти е отворен.
Генериране на кодова карта
Добре, сега знаем как работят кодовите карти и как да накараме браузъра да ги изтегли и използва. Но как да генерирам кодова карта и да направим връзка към нея в преведения файл?
Добрата новина е, че почти всеки съвременен преводач има опция за генериране на кодова карта. Нека да разгледаме няколко такива примера.
UglifyJS е популярен инструмент за минимизиране на изходния код за производствени среди. Може значително да намали размера на файловете чрез премахване на интервали, промяна на имена на променливи, премахване на клонове на мъртвия код и т.н.
Ако използвате UglifyJS, командата по-долу ще генерира допълнително кодова карта:
Ако погледнете генерирания файл (app.min.js), ще забележите, че последният ред съдържа директива sourceMappingURL, сочеща към генерираната кодова карта.
Заключение
Кодовите карти помагат при отстраняване на грешки в преведения код в производството. Като се има предвид това модерноинструментите за изграждане поддържат генериране на кодови карти, добавянето им няма да отнеме много време, но ще бъде много полезно.