|
|
Postat pe 30.06.2022 20:04:02
|
|
|
|
Cerințe: Implementați codul front-end al proiectului (Angular, vue) în mediul de producție, iar proiectul este implementatProcesul de compilare comprimă și obfuscă codulDacă un fișier map este generat în timpul compilației, putem folosi fișierul map pentru a localiza locația fișierului sursă.
Ce este Sourcemap?
O hartă sursă este, în esență, un fișier de informații care stochează informațiile corespunzătoare despre locație înainte și după conversia codului. Acesta înregistrează locația codului sursă înainte de conversie, corespunzătoare codului comprimat, și este o mapare între codul sursă și codul de producție. Sourcemap rezolvă problema că, în timpul procesului de ambalare, codul este comprimat, despațiat, compilat și transformat, rezultând imposibilitatea de a depana din cauza diferențelor mari dintre coduri.
Rolul Sourcemap
Pe scurt, Sourcemap construiește o punte între codul de pre-procesare și post-procesare, făcând ușoară localizarea unde apar bug-urile în producție. Deoarece dezvoltarea front-end de astăzi este modulară și bazată pe componente, fuzionarea și comprimarea fișierelor JS și CSS înainte de lansare poate cauza ușor confuzie. Funcția sourceMap este de a permite panoului de depanare al browserului să mapeze codul generat la fișierul sursă, iar dezvoltatorii pot depana fișierul codului sursă, ceea ce va face depanarea mult mai ușoară și mai simplă pentru programatori.
Mai întâi, creează un nou proiect Angular și scrie o bucată de cod problematic.
Codul html este următorul:
Codul TS este următorul:
În etapa de dezvoltare, dacă apare o eroare, este foarte ușor să localizezi locația greșită, așa cum se arată în figura de mai jos:
Construiește proiectul într-un pachet de lansare și generează un fișier map cu următoarea comandă:
Implementează fișierul rezultat pe un server HTTP, cum ar fi IIS, Nginx etc. TimpMută fișierul hărții într-un alt director, convenabil pentru testare.
În acest moment, nu putem vedea mesajul de eroare și codul sursă intuitiv, instalăm "Instrumentul de localizare a codului sursă" cu următoarea comandă:
Introducere parametri:
Usage: sl [options]
Options:
-v, --versiunea scoate numărul de versiune
-p, --source-flie-path Fișierul sursă generat compila fișierul hărți
-l, --ine Numărul liniei din linia de cod compilată sursă generată
-c, --coloană Numărul coloanei în sursa generată
-h, --ajutor informații despre utilizarea ieșirii
(Sfârșit)
|
Precedent:Extrage tot textul dintr-un fișier PDF folosind C# (suportă .NET Core)Următor:Cunoștințele front-end despre JavaScript sunt cunoscute în mod obișnuit ca ES6, ES8, ES 2017, ECMAScript
|
Postat pe 30.06.2022 21:36:37