Виробниче середовище серії Angular 11 (XIV) для налагодження

Маленька покидька · Опубліковано 11.08.2020 17:59:35

Компоненти Angular 9 серії (1) з динамічно завантаженим навантаженням
https://www.itsvse.com/thread-9238-1-1.html

Кутові параметри передачі 9 серій (2) динамічних компонентних компонентів
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 серія (3) підписується на події динамічних компонентів
https://www.itsvse.com/thread-9246-1-1.html

Трубопроводи Angular 9 Series (IV) Custom Pipe
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) форматує формат суми валюти
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 series (VI) викликає нативні JS-змінні та методи
https://www.itsvse.com/thread-9254-1-1.html

Приціл у стилі CSS серії Angular 9 (VII)
https://www.itsvse.com/thread-9264-1-1.html

Серія Angular 9 (VIII) оновлює значення дочірнього компонента, запускаючи подію через множину
https://www.itsvse.com/thread-9267-1-1.html

Селектор Angular 9 Series (дев'ять#id) застосовується до сторінки
https://www.itsvse.com/thread-9278-1-1.html

Angular 9 серії (10) вбудовує vconsole та eruda для налагоджувальних панелей розробників
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 Series (XI) 5 способів визначення стилів
https://www.itsvse.com/thread-9305-1-1.html

Серія Angular 9 (XII) генерує динамічні токени на основі OTP
https://www.itsvse.com/thread-9325-1-1.html

Серія Angular 10 (тринадцята) представляє схеми Baidu echarts
https://www.itsvse.com/thread-9347-1-1.html

Ми упаковуємо проєкт Angular у виробниче середовище з командою збірки, і очікуваний ефект може відрізнятися від того, що ми бачимо у нашому середовищі розробки.

Код TS:

Вхід видно.

AppComponent — це поточний компонент.

Візуалізації середовища розробки та виробничого середовища такі:

Виробниче середовище було зовсім не таким, як ми очікували.

Про дані команд збірки:

Оптимізація продуктивності побудови на кутових умовах
https://www.itsvse.com/thread-9203-1-1.html

Зараз нам потрібно його налагодити.
SourceMap — це інформаційний файл, який зберігає відображення місцезнаходження вихідного коду та скомпільованого коду

У фронтенд-роботі він переважно використовується для розв'язання налагоджувальних задач у трьох аспектах:

a. Після плутанини коду стиснення
b. Після компіляції в css або JS за допомогою інших мов, таких як sass і typeScript
c. Після об'єднання мультифайлів за допомогою інструментів пакування, таких як webpack

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

Потрібно змінити команду build, яка виглядає так:

Вхід видно.

(Перед додаванням параметрів)

(Після додавання параметрів)

Ви бачите, що генерується багато файлів *.map.

Як показано на зображенні вище, скористайтеся Google Chrome, натисніть F12, щоб перейти в режим розробника, виберіть джерело, виберіть main.js, а потім клацніть правою кнопкою миші та виберіть опцію «Додати карту джерела», щоб додати адресу файлу згенерованої карти.

Наприклад:

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map

(Кінець)

[Кутовий голос] Виробниче середовище серії Angular 11 (XIV) для налагодження

Пов'язані дописи

Переглянуті розділи