|
|
Opslået på 30/06/2022 20.04.02
|
|
|
|
Krav: Udrul front-end projektkoden (Angular, vue) til produktionsmiljøet, og projektet er i gangKompileringsprocessen komprimerer og obfuskerer kodenHvis en kortfil genereres under kompileringen, kan vi bruge kortfilen til at finde kildefilens placering.
Hvad er Sourcemap?
Et kildekort er i bund og grund en informationsfil, der gemmer de tilsvarende lokationsoplysninger før og efter kodekonverteringen. Den registrerer kildekodens placering før konvertering, svarende til den komprimerede kode, og er en kortlægning mellem kildekode og produktionskode. Sourcemap løser problemet, at koden under pakningsprocessen bliver komprimeret, despaced, kompileret og transformeret, hvilket resulterer i, at man ikke kan fejlfinde på grund af de store forskelle mellem koderne.
Sourcemap's rolle
Kort sagt bygger Sourcemap en bro mellem forbehandling og efterbehandlingskode, hvilket gør det nemt at lokalisere, hvor fejl opstår i produktionen. Da nutidens front-end udvikling er modulær og komponentbaseret, kan sammensmeltning og komprimering af JS- og CSS-filer før live-start let skabe forvirring. Funktionen af SourceMap er at lade browserens fejlfindingspanel kortlægge den genererede kode til kildekodefilen, og udviklere kan fejlfinde i kildekodefilen, hvilket vil gøre fejlfinding meget nemmere og enklere for programmørerne.
Først skal du oprette et nyt Angular-projekt og skrive et stykke problematisk kode.
HTML-koden er som følger:
TS-koden er som følger:
I udviklingsfasen, hvis der opstår en fejl, er det meget let at finde det forkerte sted, som vist i figuren nedenfor:
Byg projektet ind i en release-pakke og generer en map-fil med følgende kommando:
Udrul den resulterende fil på en HTTP-server, såsom IIS, Nginx osv. MellemtidenFlyt kortfilen til en anden mappe, praktisk til test.
På nuværende tidspunkt kan vi ikke se fejlmeddelelsen og kildekoden intuitivt, vi installerer "Source Code Locator Tool" med følgende kommando:
Parameterintroduktion:
Usage: sl [options]
Options:
-v, --version outputte versionsnummeret
-p, --source-flie-path Den genererede kildefil kompilerede kortfil
-l, --ine Linjenummeret i den genererede kildekompilerede kodelinje
-c, --kolonne Kolonnenummeret i den genererede kilde
-h, --hjælp med at outputte brugsinformation
(Slut)
|
Tidligere:Udtræk al tekst fra en PDF-fil ved hjælp af C# (understøtter .NET Core)Næste:Front-end viden om JavaScript, almindeligvis omtalt som ES6, ES8, ES 2017, ECMAScript
|
Opslået på 30/06/2022 21.36.37