|
|
Postitatud 30.06.2022 20:04:02
|
|
|
|
Nõuded: Juuruta projekti esiosa (Angular, Vue) kood tootmiskeskkonda ja projekt on valmisKompileerimisprotsess tihendab ja varjab koodiKui kompileerimise käigus genereeritakse kaardifail, saame kaardifaili abil leida lähtefaili asukoht.
Mis on Sourcemap?
Allikakaart on sisuliselt infofail, mis salvestab vastava asukohainfo enne ja pärast koodi teisendamist. See salvestab lähtekoodi asukoha enne teisendamist, mis vastab tihendatud koodile, ning on seos lähtekoodi ja tootmiskoodi vahel. Sourcemap lahendab probleemi, et pakkimisprotsessi käigus tihendatakse, despaceeritakse kood ning kompileeritakse ja teisendatakse, mistõttu silumisvõimetus on suurte erinevuste tõttu koodide vahel.
Sourcemapi roll
Lihtsalt öeldes loob Sourcemap silla eeltöötluse ja järeltöötluse koodi vahele, muutes lihtsaks vea leidmise tootmises. Kuna tänapäeva front-end arendus on modulaarne ja komponentpõhine, võib JS- ja CSS-failide ühendamine ja pakkimine enne avaldamist kergesti tekitada segadust. SourceMapi funktsioon on võimaldada brauseri silumispaneelil kaardistada genereeritud kood lähtekoodifailiga ning arendajad saavad siluda lähtekoodi failis, mis teeb silumise programmeerijatele palju lihtsamaks ja lihtsamaks.
Esiteks loo uus Angulari projekt ja kirjuta probleemne kood.
HTML-kood on järgmine:
TS kood on järgmine:
Arendusetapis, kui tekib viga, on väga lihtne leida vale asukoht, nagu alloleval joonisel näidatud:
Ehita projekt väljalaskepaketti ja genereeri kaardifail järgmise käsuga:
Paigalda saadud fail HTTP serverisse, näiteks IIS, Nginx jne. VahepealVii kaardifail teise kataloogi, mugav testimiseks.
Praegu ei näe me veateadet ega lähtekoodi intuitiivselt, paigaldame "Source Code Locator Tool" järgmise käsuga:
Parameetrite tutvustus:
Usage: sl [options]
Options:
-v, --versioon väljastab versiooninumbri
-p, --source-flie-path Genereeritud lähtefail kompileeritud kaardifail
-l, --ine Genereeritud lähtekoodi rea number kompileeritud koodireas
-c, --veerg Veeru number genereeritud allikas
-h, --abi väljundi kasutusinfo
(Lõpp)
|
Eelmine:Kogu tekst PDF-failist välja C# abil (toetab .NET Core'i)Järgmine:JavaScripti esiosateadmised, mida tavaliselt nimetatakse ES6, ES8, ES 2017, ECMAScript
|
Postitatud 30.06.2022 21:36:37