Angular 11 sorozat (XIV) gyártási környezet hibakereséshez

Kis szemét · Közzétéve 2020. 08. 11. 17:59:35

Angular 9 sorozat (1) Dinamikusan feltöltött alkatrészek
https://www.itsvse.com/thread-9238-1-1.html

Szöges 9-es sorozat (2) dinamikus komponens átviteli paraméter
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 sorozat (3) feliratkozik dinamikus komponens eseményekre
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 sorozatú (IV) egyedi csővezetékek
https://www.itsvse.com/thread-9248-1-1.html

Az Angular 9-es sorozat (V) formátumban a pénz összege formátumát
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 sorozat (VI) natív JS változókat és metóduszokat hív
https://www.itsvse.com/thread-9254-1-1.html

Szögletes 9-es sorozat (VII) CSS-stílusú távcső
https://www.itsvse.com/thread-9264-1-1.html

Az Angular 9 sorozat (VIII) egy gyermekkomponens értékét úgy frissíti, hogy egy eseményt indít el halmazon keresztül
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 sorozat (kilenc) #id választó az oldalon
https://www.itsvse.com/thread-9278-1-1.html

Az Angular 9-es sorozat (10) beágyazza a vconsole és eruda fejlesztői hibakereső paneleket
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 sorozat (XI) 5 módja a stílusok meghatározásának
https://www.itsvse.com/thread-9305-1-1.html

Az Angular 9 sorozat (XII) dinamikus tokeneket generál OTP-k alapján
https://www.itsvse.com/thread-9325-1-1.html

Az Angular 10-es sorozat (tizenhárom) bemutatja a Baidu echarts diagramokat
https://www.itsvse.com/thread-9347-1-1.html

Az Angular projektet egy gyártási környezetbe csomagoljuk a build parancs segítségével, és a várható hatás eltérhet attól, amit a fejlesztési környezetünkben látunk.

TS kód:

A bejelentkezés látható.

Az AppComponent a jelenlegi komponens.

A fejlesztési és a gyártási környezet képei a következők:

A produkciós környezet egyáltalán nem volt az, amire számítottunk.

A build parancs adatairól:

Szögalapú építési teljesítményoptimalizálás
https://www.itsvse.com/thread-9203-1-1.html

Most hibáznunk kell.
A SourceMap egy információs fájl, amely tárolja a forráskód és a lefordított kód helyleképezését

Front-end munkában főként a következő három szempontból történő hibakeresési problémák megoldására használják:

a. Miután a kódtömörítést összekeverik
b. Miután css-re vagy JS-re fordították más nyelveket, például a sass és a typeScript használatát
c. Többfájlos összevonás után csomagolási eszközökkel, például webpack használatával

A fenti három esetben nem tudjuk olyan könnyen hibazni a forráskódot, mint a hibakeresésnél, ezért szükségünk van a SourceMapre, hogy segítsen a konzolon forráskóddá konvertálni a hibakereséshez.

Módosítanunk kell a build parancsot, ami a következő:

A bejelentkezés látható.

(Paraméterek hozzáadása előtt)

(Paraméterek hozzáadása után)

Láthatod, hogy sok *.map fájl generálódik.

Ahogy a fenti képen látható, használd a Google Chrome-ot, nyomd meg az F12-t a fejlesztői módhoz, válaszd a forrást, válaszd a main.js-t, majd jobb kattintással válaszd ki a "Add Source map" opciót, hogy hozzáadd a generált térképfájl címet.

Például:

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

(Vége)

[Szöglet] Angular 11 sorozat (XIV) gyártási környezet hibakereséshez

Kapcsolódó bejegyzések

Megtekintett szakaszok