|
|
Publisert på 30.06.2022 20:04:02
|
|
|
|
Krav: Distribuer front-end prosjektkoden (Angular, vue) til produksjonsmiljøet, og prosjektet er i gangKompilasjonsprosessen komprimerer og obfuskerer kodenHvis en kartfil genereres under kompileringen, kan vi bruke kartfilen til å finne kildefilens plassering.
Hva er Sourcemap?
Et kildekart er i hovedsak en informasjonsfil som lagrer den tilsvarende posisjonsinformasjonen før og etter kodekonverteringen. Den registrerer kildekodens plassering før konvertering, tilsvarende den komprimerte koden, og er en kartlegging mellom kildekode og produksjonskode. Sourcemap løser problemet med at koden under pakkeprosessen komprimeres, despaceres, kompileres og transformeres, noe som resulterer i manglende mulighet til feilsøking på grunn av store forskjeller mellom kodene.
Rollen til Sourcemap
Enkelt sagt bygger Sourcemap en bro mellom forbehandling og etterbehandlingskode, noe som gjør det enkelt å finne hvor feil oppstår i produksjonen. Siden dagens front-end-utvikling er modulær og komponentbasert, kan sammenslåing og komprimering av JS- og CSS-filer før lansering lett skape forvirring. Funksjonen til SourceMap er å la nettleserens feilsøkingspanel kartlegge den genererte koden til kildekodefilen, og utviklere kan feilsøke i kildekodefilen, noe som vil gjøre feilsøking mye enklere og enklere for programmerere.
Først, lag et nytt Angular-prosjekt og skriv et stykke problematisk kode.
HTML-koden er som følger:
TS-koden er som følger:
I utviklingsfasen, hvis det oppstår en feil, er det veldig lett å finne feil sted, som vist i figuren nedenfor:
Bygg prosjektet inn i en release-pakke og generer en kartfil med følgende kommando:
Distribuer den resulterende filen på en HTTP-server, som IIS, Nginx, osv. MellomtidenFlytt kartfilen til en annen mappe, praktisk for testing.
Akkurat nå kan vi ikke se feilmeldingen og kildekoden intuitivt, så vi installerer "Source Code Locator Tool" med følgende kommando:
Parameterintroduksjon:
Usage: sl [options]
Options:
-v, --versjon gir ut versjonsnummeret
-p, --source-flie-path Den genererte kildefilen kompilerte kartfil
-l, --ine Linjenummeret i den genererte kildekompilerte kodelinjen
-c, --kolonne Kolonnenummeret i den genererte kilden
-h, --hjelp til å gi ut bruksinformasjon
(Slutt)
|
Foregående:Trekk ut all tekst fra en PDF-fil ved hjelp av C# (støtter .NET Core)Neste:Front-end kunnskap om JavaScript ofte referert til som ES6, ES8, ES 2017, ECMAScript
|
Publisert på 30.06.2022 21:36:37