|
|
Julkaistu 30.6.2022 20.04.02
|
|
|
|
Vaatimukset: Ota front-end-projektin (Angular, vue) koodi käyttöön tuotantoympäristössä, ja projekti on valmisKäännösprosessi pakkaa ja hämärtää koodiaJos karttatiedosto luodaan käännöksen aikana, voimme käyttää karttatiedostoa lähdetiedoston sijainnin löytämiseen.
Mikä on Sourcemap?
Lähdekartta on pohjimmiltaan tietotiedosto, joka tallentaa vastaavat sijaintitiedot ennen ja jälkeen koodinmuunnoksen. Se tallentaa lähdekoodin sijainnin ennen muuntamista, joka vastaa pakattua koodia, ja toimii kuvauksena lähdekoodin ja tuotantokoodin välillä. Sourcemap ratkaisee ongelman, että pakkausprosessin aikana koodi pakataan, poistetaan avaruudesta, käännetään ja muunnetaan, mikä johtaa virheenkorjauksen mahdottomuuteen suurten koodierojen vuoksi.
Sourcemapin rooli
Yksinkertaisesti sanottuna Sourcemap rakentaa sillan esikäsittelyn ja jälkikäsittelyn koodin välille, tehden virheiden löytämisestä tuotannossa helppoa. Koska nykyinen front-end-kehitys on modulaarista ja komponenttipohjaista, JS- ja CSS-tiedostojen yhdistäminen ja pakkaaminen ennen käyttöönottoa voi helposti aiheuttaa sekaannusta. SourceMapin tehtävänä on mahdollistaa selaimen virheenkorjauspaneelin kartoittaa generoitu koodi lähdekooditiedostoon, ja kehittäjät voivat debugata lähdekooditiedostossa, mikä helpottaa ja helpottaa virheenkorjausta ohjelmoijille.
Ensiksi luo uusi Angular-projekti ja kirjoita ongelmallinen koodi.
HTML-koodi on seuraava:
TS-koodi on seuraava:
Kehitysvaiheessa, jos virhe ilmenee, väärän sijainnin löytäminen on hyvin helppoa, kuten alla olevassa kuvassa näkyy:
Rakenna projekti julkaisupaketiksi ja luo karttatiedosto seuraavalla komennolla:
Julkaise tuloksena oleva tiedosto HTTP-palvelimelle, kuten IIS, Nginx jne. sillä välinSiirrä karttatiedosto toiseen hakemistoon, kätevä testattavaksi.
Tällä hetkellä emme näe virheilmoitusta ja lähdekoodia intuitiivisesti, vaan asennamme "Source Code Locator Toolin" seuraavalla komennolla:
Parametrien esittely:
Usage: sl [options]
Options:
-v, --versio tuottaa versionumeron
-p, --source-flie-path Generoitu lähdetiedosto käännetty karttatiedosto
-l, --ine Rivin numero generoidussa lähdekoodirivissä
-c, --sarake Sarakkeen numero generoidussa lähteessä
-h, --apua ulostulosten käyttötiedot
(Loppu)
|
Edellinen:Purkaa kaikki teksti PDF-tiedostosta C#:lla (tukee .NET Corea)Seuraava:JavaScriptin käyttöliittymän tuntemus, jota yleisesti kutsutaan nimillä ES6, ES8, ES 2017, ECMAScript
|
Julkaistu 30.6.2022 21.36.37