|
|
Közzétéve 2022. 06. 30. 20:04:02
|
|
|
|
Követelmények: Telepítsd a front-end projekt kódot (Angular, Vue) a gyártási környezetbe, és a projekt bekövetkezettA fordítási folyamat tömöríti és elhomályosítja a kódotHa a fordítás során térképfájlt generálunk, akkor a térképfájlt használhatjuk a forrásfájl helyének megtalálásához.
Mi az a Sourcemap?
A forrástérkép lényegében egy információs fájl, amely tárolja a megfelelő helyadatokat a kódváltás előtt és után. A forráskód helyét rögzíti a tömörített kódhoz való átalakítás előtt, és a forráskód és a gyártási kód közötti leképezés képezi. A Sourcemap megoldja azt a problémát, hogy a csomagolás során a kód tömörítik, távolságtalanul kerül, majd fordítják és átalakítják, ami miatt a kódok közötti nagy különbségek miatt hibakeresés nem lehetséges.
A Sourcemap szerepe
Egyszerűen fogalmazva, a Sourcemap hidat épít az előfeldolgozás és utófeldolgozás kód között, megkönnyítve a gyártás során előforduló hibák megtalálását. Mivel a mai front-end fejlesztés moduláris és komponens-alapú, a JS és CSS fájlok összevonása és tömörítése az élet előtt könnyen okozhat zavart. A sourceMap funkciója, hogy a böngésző hibakereső panelje leképezze a generált kódot a forráskód fájlhoz, és a fejlesztők hibakeresést végezhetnek a forráskód fájlban, ami sokkal könnyebbé és egyszerűbbé teszi a hibakeresést a programozók számára.
Először hozz létre egy új Angular projektet, és írj egy problémás kódot.
A html kód a következő:
A TS kód a következő:
A fejlesztési szakaszban, ha hiba történik, nagyon könnyű rossz helyet találni, ahogy az alábbi ábrán látható:
Építsd be a projektet egy kiadási csomaggá, és generálj térképfájlt a következő parancsval:
Telepítsd a kapott fájlt egy HTTP szerveren, például IIS-en, Nginx-en stb. időközbenHelyezze át a térképfájlt egy másik könyvtárba, teszteléshez kényelmes.
Jelenleg nem látjuk intuitívan a hibaüzenetet és a forráskódot, ezért telepítjük a "Source Code Locator Tool"-t a következő parancspal:
Paraméter bevezetése:
Usage: sl [options]
Options:
-v, --verzió adja ki a verziószámot
-p, --source-flie-path A generált forrásfájl lefordított térképfájl
-l, --ine A generált forráskód által fordított kódsorban lévő sor száma
-c, --oszlop A generált forrásban lévő oszlopszám
-h, --segítő kimeneti információ
(Vége)
|
Előző:A szöveg kinyerése egy PDF fájlból C# használatával (támogatja a .NET Core-ot)Következő:JavaScript front-end ismerete, amelyet gyakran ES6, ES8, ES 2017, ECMAScript néven is ismernek
|
Közzétéve 2022. 06. 30. 21:36:37