|
|
Zverejnené 30. 6. 2022 20:04:02
|
|
|
|
Požiadavky: Nasadiť front-end kód projektu (Angular, Vue) do produkčného prostredia a projekt je hotovýProces kompilácie kód komprimuje a zahmlievaAk sa počas kompilácie vygeneruje mapový súbor, môžeme ho použiť na lokalizáciu miesta zdrojového súboru.
Čo je Sourcemap?
Zdrojová mapa je v podstate informačný súbor, ktorý uchováva zodpovedajúce informácie o polohe pred a po konverzii kódu. Zaznamenáva umiestnenie zdrojového kódu pred konverziou zodpovedajúcu komprimovanému kódu a slúži ako mapovanie medzi zdrojovým kódom a produkčným kódom. Sourcemap rieši problém, že počas balenia sa kód komprimuje, despaceuje, kompiluje a transformuje, čo spôsobuje nemožnosť ladenia kvôli veľkým rozdielom medzi kódmi.
Úloha Sourcemap
Jednoducho povedané, Sourcemap vytvára most medzi predspracovaním a postprocesovaním kódu, vďaka čomu je jednoduché lokalizovať, kde sa v produkcii vyskytujú chyby. Keďže dnešný front-end vývoj je modulárny a založený na komponentoch, zlučovanie a komprimovanie JS a CSS súborov pred spustením môže ľahko spôsobiť zmätok. Funkciou sourceMap je umožniť ladiacemu panelu prehliadača mapovať vygenerovaný kód na súbor zdrojového kódu a vývojári môžu ladiť v súbore zdrojového kódu, čo výrazne uľahčí a zjednoduší ladenie pre programátorov.
Najprv vytvorte nový projekt v Angulare a napíšte problematický kód.
HTML kód je nasledovný:
TS kód je nasledovný:
V štádiu vývoja, ak dôjde k chybe, je veľmi jednoduché nájsť nesprávne miesto, ako je znázornené na obrázku nižšie:
Vybudujte projekt do release balíka a vygenerujte mapový súbor pomocou nasledujúceho príkazu:
Výsledný súbor nasadíte na HTTP server, napríklad IIS, Nginx a podobne. medzitýmPresunúť mapový súbor do iného adresára, vhodné na testovanie.
V tejto chvíli nevidíme chybové hlásenie ani zdrojový kód intuitívne, preto inštalujeme "Source Code Locator Tool" s nasledujúcim príkazom:
Úvod parametrov:
Usage: sl [options]
Options:
-v, --verzia výstup číslo verzie
-p, --source-flie-path Generovaný zdrojový súbor kompilovaný mapový súbor
-l, --ine Číslo riadku v generovanom zdrojovom kompilovanom riadku kódu
-c, --stĺpec Číslo stĺpca v generovanom zdroji
-h, --help výstup informácií o používaní
(Koniec)
|
Predchádzajúci:Extrahujte všetok text z PDF súboru pomocou C# (podporuje .NET Core)Budúci:Front-endové znalosti JavaScriptu, bežne označovaného ako ES6, ES8, ES 2017, ECMAScript
|
Zverejnené 30. 6. 2022 21:36:37