|
|
Zveřejněno 30.06.2022 20:04:02
|
|
|
|
Požadavky: Nasadit front-end kód projektu (Angular, Vue) do produkčního prostředí a projekt je hotovýProces kompilace kód komprimuje a zamlžujePokud je během kompilace vytvořen mapový soubor, můžeme mapový soubor použít k nalezení místa zdrojového souboru.
Co je Sourcemap?
Zdrojová mapa je v podstatě informační soubor, který ukládá odpovídající informace o poloze před a po konverzi kódu. Zaznamenává umístění zdrojového kódu před konverzí odpovídající komprimovanému kódu a slouží jako mapování mezi zdrojovým a produkčním kódem. Sourcemap řeší problém, kdy je během balení kód komprimován, despacedován, kompilován a transformován, což vede k nemožnosti ladění kvůli velkým rozdílům mezi kódy.
The role of Sourcemap
Jednoduše řečeno, Sourcemap vytváří most mezi předzpracováním a postzpracováním kódu, což usnadňuje lokalizaci míst, kde se chyby v produkci vyskytují. Protože dnešní front-end vývoj je modulární a založený na komponentách, může slučování a komprese JS a CSS souborů před spuštěním snadno způsobit zmatek. Funkcí sourceMap je umožnit ladicímu panelu prohlížeče mapovat vygenerovaný kód na soubor zdrojového kódu a vývojáři ladit soubor zdrojového kódu, což výrazně usnadní a zjednoduší ladění pro programátory.
Nejprve vytvořte nový projekt v Angularu a napište problematický kód.
HTML kód je následující:
TS kód je následující:
Ve fázi vývoje, pokud dojde k chybě, je velmi snadné najít špatné místo, jak je znázorněno na obrázku níže:
Sestavte projekt do release balíčku a vygenerujte mapový soubor pomocí následujícího příkazu:
Výsledný soubor nasadit na HTTP server, například IIS, Nginx atd. mezitímPřesuňte mapový soubor do jiného adresáře, vhodné pro testování.
V tuto chvíli chybovou zprávu a zdrojový kód intuitivně nevidíme, proto instalujeme "Source Code Locator Tool" s následujícím příkazem:
Úvod parametrů:
Usage: sl [options]
Options:
-v, --version výstup číslo verze
-p, --source-flie-path Generovaný zdrojový soubor zkompilovaný mapový soubor
-l, --ine Číslo řádku v generovaném zdrojovém kompilovaném řádku kódu
-c, --sloupec Číslo sloupce ve generovaném zdroji
-h, --nápověda výstupu informací o využití
(Konec)
|
Předchozí:Extrahujte veškerý text z PDF souboru pomocí C# (podporuje .NET Core)Další:Znalosti JavaScriptu na front-endu, běžně označovaného jako ES6, ES8, ES 2017, ECMAScript
|
Zveřejněno 30.06.2022 21:36:37