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