|
|
Опубликовано 30.06.2022 20:04:02
|
|
|
|
Требования: Развернуть фронтенд-код проекта (Angular, vue) в производственную среду, и проект уже вПроцесс компиляции сжимает и обфускирует кодЕсли во время компиляции генерируется файл карты, мы можем использовать файл карты для поиска местоположения исходного файла.
Что такое Sourcemap?
Исходная карта — это, по сути, информационный файл, который хранит соответствующую информацию о местоположении до и после преобразования кода. Он фиксирует местоположение исходного кода до преобразования, соответствующее сжатому коду, и служит сопоставлением между исходным кодом и производственным кодом. Sourcemap решает проблему, когда в процессе упаковки код сжимается, размещается, компилируется и преобразуется, что приводит к невозможности отладки из-за больших различий между кодами.
Роль Sourcemap
Проще говоря, Sourcemap создаёт мост между предобработкой и послеобработкой кода, что облегчает поиск ошибок в продакшене. Поскольку современная фронтенд-разработка модульна и основана на компонентах, объединение и сжатие файлов JS и CSS перед запуском легко может привести к путанице. Функция sourceMap заключается в том, чтобы панель отладки браузера сопоставляла сгенерированный код с исходным файлом, а разработчики могут отладить файл исходного кода, что значительно упростит и упростит отладку для программистов.
Сначала создайте новый проект Angular и напишите проблемный код.
Html-код выглядит следующим образом:
Код TS выглядит следующим образом:
На этапе разработки, если есть ошибка, очень легко найти неправильное место, как показано на рисунке ниже:
Вставьте проект в пакет для выпуска и сгенерируйте файл карты с помощью следующей команды:
Развернуть полученный файл на HTTP-сервере, таком как IIS, Nginx и др. тем временемПереместите файл карты в другой каталог, удобно для тестирования.
В данный момент мы не видим сообщение об ошибке и исходный код интуитивно, поэтому устанавливаем «Инструмент поиска исходного кода» со следующей командой:
Введение параметров:
Usage: sl [options]
Options:
-v, --версия выводит номер версии
-p, --source-flie-path Сформированный исходный файл скомпилировал файл карты
-l, --ine Номер строки в сгенерированной скомпилированной строке кода
-c, --столбец Номер столбца в сгенерированном источнике
-h, --помощь с выводом информации об использовании
(Конец)
|
Предыдущий:Извлечение всего текста из PDF-файла с помощью C# (поддерживает .NET Core)Следующий:Фронтенд-знания JavaScript, обычно называемые ES6, ES8, ES 2017, ECMAScript
|
Опубликовано 30.06.2022 21:36:37