|
|
Objavljeno na 30. 06. 2022 20:04:02
|
|
|
|
Zahteve: Namestite kodo front-end projekta (Angular, Vue) v produkcijsko okolje in projekt je pripravljenPostopek prevajanja stisne in zamegli kodoČe se med prevajanjem ustvari datoteka zemljevida, lahko uporabimo datoteko zemljevida za iskanje lokacije izvorne datoteke.
Kaj je Sourcemap?
Izvorni zemljevid je v bistvu informacijska datoteka, ki shranjuje ustrezne podatke o lokaciji pred in po pretvorbi kode. Zabeleži lokacijo izvorne kode pred konverzijo, ki ustreza stisnjeni kodi, in je preslikava med izvorno kodo in produkcijsko kodo. Sourcemap rešuje težavo, da se med pakiranjem koda stisne, odstrani presledek, prevede in transformira, kar zaradi velikih razlik med kodami onemogoča odpravljanje napak.
Vloga Sourcemap
Preprosto povedano, Sourcemap gradi most med predprocesiranjem in naknadno obdelavo kode, kar omogoča enostavno prepoznavanje, kje se v produkciji pojavijo napake. Ker je današnji razvoj na front-endu modularen in temelji na komponentah, lahko združevanje in stiskanje JS in CSS datotek pred objavo hitro povzroči zmedo. Funkcija sourceMap je omogočiti razhroščevalni plošči brskalnika, da preslika generirano kodo na datoteko izvorne kode, razvijalci pa lahko odpravljajo napake v datoteki izvorne kode, kar bo programerjem olajšalo in poenostavilo odpravljanje napak.
Najprej ustvarite nov Angular projekt in napišite problematično kodo.
HTML koda je naslednja:
TS koda je naslednja:
V fazi razvoja, če pride do napake, je zelo enostavno najti napačno lokacijo, kot je prikazano na spodnji sliki:
Projekt sestavite v paket izdaje in ustvarite mapo z naslednjim ukazom:
Nastalo datoteko namestite na HTTP strežnik, kot so IIS, Nginx itd. MedtemPremakni datoteko zemljevida v drugo mapo, priročno za testiranje.
Trenutno ne moremo intuitivno videti sporočila o napaki in izvorne kode, zato namestimo "Source Code Locator Tool" z naslednjim ukazom:
Uvod v parametre:
Usage: sl [options]
Options:
-v, --verzija izhodi številko različice
-p, --source-flie-path Generirana izvorna datoteka prevedena z zemljevidom
-l, --ine Številka vrstice v generirani izvorni prevedeni vrstici kode
-c, --stolpec Številka stolpca v generiranem viru
-h, --pomoč pri izhodu informacij o uporabi
(Konec)
|
Prejšnji:Izvlecite vse besedilo iz PDF datoteke z uporabo C# (podpira .NET Core)Naslednji:Poznavanje JavaScripta na sprednji strani, pogosto imenovanega ES6, ES8, ES 2017, ECMAScript
|
Objavljeno na 30. 06. 2022 21:36:37