|
|
Publicerad på 2022-06-30 20:04:02
|
|
|
|
Krav: Distribuera front-end-projektkoden (Angular, vue) till produktionsmiljön, och projektet är iKompileringsprocessen komprimerar och fördunklar kodenOm en kartfil genereras under kompilering kan vi använda kartfilen för att lokalisera källfilens plats.
Vad är Sourcemap?
En källkarta är i princip en informationsfil som lagrar motsvarande platsinformation före och efter kodkonverteringen. Den registrerar källkodens plats före konvertering motsvarande den komprimerade koden, och är en koppling mellan källkod och produktionskod. Sourcemap löser problemet att koden under paketeringsprocessen komprimeras, despaces, kompileras och transformeras, vilket resulterar i oförmåga att felsöka på grund av de stora skillnaderna mellan koderna.
Sourcemaps roll
Enkelt uttryckt bygger Sourcemap en bro mellan förbearbetning och efterbearbetningskod, vilket gör det enkelt att lokalisera var buggar uppstår i produktionen. Eftersom dagens frontend-utveckling är modulär och komponentbaserad kan sammanslagning och komprimering av JS- och CSS-filer innan de går live lätt orsaka förvirring. Funktionen hos SourceMap är att låta webbläsarens felsökningspanel mappa den genererade koden till källkodsfilen, och utvecklare kan felsöka i källkodsfilen, vilket gör felsökningen mycket enklare och enklare för programmerare.
Först, skapa ett nytt Angular-projekt och skriva en problematisk kod.
HTML-koden är följande:
TS-koden är som följer:
I utvecklingsstadiet, om det finns ett fel, är det mycket lätt att hitta fel plats, som visas i figuren nedan:
Bygg projektet i ett releasepaket och generera en kartfil med följande kommando:
Distribuera den resulterande filen på en HTTP-server, såsom IIS, Nginx, etc. TidenFlytta kartfilen till en annan katalog, bekvämt för testning.
Just nu kan vi inte se felmeddelandet och källkoden intuitivt, vi installerar "Source Code Locator Tool" med följande kommando:
Parameterintroduktion:
Usage: sl [options]
Options:
-v, --version ger ut versionsnumret
-p, --source-flie-path Den genererade källfilen kompilerade kartfil
-l, --ine Radnumret i den genererade källkompilerade kodraden
-c, --kolumn Kolumnnumret i den genererade källan
-h, --hjälp till att ge ut användningsinformation
(Slut)
|
Föregående:Extrahera all text från en PDF-fil med C# (stöder .NET Core)Nästa:Front-end-kunskap i JavaScript kallas vanligtvis ES6, ES8, ES 2017, ECMAScript
|
Publicerad på 2022-06-30 21:36:37