|
|
Publicēts 30.06.2022 20:04:02
|
|
|
|
Prasības: izvietojiet priekšgala projekta (Angular, vue) kodu ražošanas vidē, un projekts irKompilācijas process saspiež un aizsedz koduJa kompilācijas laikā tiek ģenerēts kartes fails, mēs varam izmantot kartes failu, lai atrastu avota faila atrašanās vietu.
Kas ir Sourcemap?
Avota karte būtībā ir informācijas fails, kurā tiek glabāta atbilstošā atrašanās vietas informācija pirms un pēc koda konvertēšanas. Tas ieraksta avota koda atrašanās vietu pirms konvertēšanas, kas atbilst saspiestajam kodam, un ir kartēšana starp avota kodu un ražošanas kodu. Sourcemap atrisina problēmu, ka iepakošanas procesā kods tiek saspiests, atdalīts, kompilēts un pārveidots, kā rezultātā nav iespējams atkļūdot lielo atšķirību dēļ starp kodiem.
Avota kartes loma
Vienkārši sakot, Sourcemap veido tiltu starp pirmapstrādes un pēcapstrādes kodu, ļaujot viegli noteikt, kur rodas kļūdas ražošanā. Tā kā mūsdienu priekšgala izstrāde ir modulāra un balstīta uz komponentiem, JS un CSS failu apvienošana un saspiešana pirms ieviešanas var viegli radīt neskaidrības. sourceMap funkcija ir ļaut pārlūkprogrammas atkļūdošanas panelim kartēt ģenerēto kodu uz avota koda failu, un izstrādātāji var atkļūdot avota koda failu, kas programmētājiem padarīs atkļūdošanu daudz vieglāku un vienkāršāku.
Vispirms izveidojiet jaunu Angular projektu un uzrakstiet problemātisku kodu.
HTML kods ir šāds:
TS kods ir šāds:
Izstrādes stadijā, ja ir kļūda, ir ļoti viegli atrast nepareizu atrašanās vietu, kā parādīts zemāk redzamajā attēlā:
Veidojiet projektu laidiena pakotnē un ģenerējiet kartes failu ar šādu komandu:
Izvietojiet iegūto failu HTTP serverī, piemēram, IIS, Nginx utt. LaikuKartes faila pārvietošana uz citu direktoriju, ērti testēšanai.
Šobrīd mēs nevaram intuitīvi redzēt kļūdas ziņojumu un avota kodu, mēs instalējam "Source Code Locator Tool" ar šādu komandu:
Parametru ievads:
Usage: sl [options]
Options:
-v, --version izvade versijas numurs
-p, --source-flie-path Ģenerētais avota fails kompilēts kartes fails
-l, --ine Rindas numurs ģenerētajā avota kompilētajā koda rindā
-c, --kolonna Kolonnas numurs ģenerētajā avotā
-h, --palīdzība izvades lietojuma informācija
(Beigas)
|
Iepriekšējo:Izvilkt visu tekstu no PDF faila, izmantojot C# (atbalsta .NET Core)Nākamo:Priekšgala zināšanas par JavaScript, ko parasti dēvē par ES6, ES8, ES 2017, ECMAScript
|
Publicēts 30.06.2022 21:36:37