|
|
Geplaatst op 30-06-2022 20:04:02
|
|
|
|
Eisen: Rol de front-end projectcode (Angular, vue) uit in de productieomgeving, en het project is inHet compilatieproces comprimeert en obfusceert de codeAls er tijdens het compileren een mapbestand wordt gegenereerd, kunnen we het mapbestand gebruiken om de locatie van het bronbestand te lokaliseren.
Wat is Sourcemap?
Een bronkaart is in wezen een informatiebestand dat de bijbehorende locatiegegevens opslaat vóór en na de codeconversie. Het registreert de locatie van de broncode vóór de conversie, overeenkomstig de gecomprimeerde code, en is een koppeling tussen broncode en productiecode. Sourcemap lost het probleem op dat tijdens het verpakkingsproces de code wordt gecomprimeerd, gedespaced, gecompileerd en getransformeerd, waardoor het niet mogelijk is om te debuggen vanwege de grote verschillen tussen de codes.
De rol van Sourcemap
Simpel gezegd bouwt Sourcemap een brug tussen pre-processing en post-processing code, waardoor het gemakkelijk is om te lokaliseren waar bugs in productie voorkomen. Omdat de huidige front-end ontwikkeling modulair en componentgebaseerd is, kan het samenvoegen en comprimeren van JS- en CSS-bestanden voordat het live gaat gemakkelijk verwarring veroorzaken. De functie van SourceMap is om het debuggingpaneel van de browser toe te staan de gegenereerde code aan het broncodebestand te koppelen, en ontwikkelaars kunnen debuggen in het broncodebestand, wat het debuggen voor programmeurs veel eenvoudiger en eenvoudiger maakt.
Maak eerst een nieuw Angular-project aan en schrijf een stuk problematische code.
De html-code is als volgt:
De TS-code is als volgt:
In de ontwikkelingsfase is het bij een fout heel gemakkelijk om de verkeerde locatie te vinden, zoals getoond in de onderstaande figuur:
Bouw het project in een releasepakket en genereer een mapbestand met het volgende commando:
Deploy het resulterende bestand op een HTTP-server, zoals IIS, Nginx, enzovoort. tussentijdVerplaats het mapbestand naar een andere map, handig om te testen.
Op dit moment kunnen we het foutbericht en de broncode niet intuïtief zien; we installeren de "Source Code Locator Tool" met het volgende commando:
Parameterintroductie:
Usage: sl [options]
Options:
-v, --versie geeft het versienummer uit
-p, --source-flie-path Het gegenereerde bronbestand gecompileerd kaartbestand
-l, --ine Het regelnummer in de gegenereerde source gecompileerde code regel code
-c, --kolom Het kolomnummer in de gegenereerde bron
-h, --help met het uitvoeren van gebruiksinformatie
(Einde)
|
Vorig:Haal alle tekst uit een PDF-bestand met C# (ondersteunt .NET Core)Volgend:Front-end kennis van JavaScript, algemeen bekend als ES6, ES8, ES 2017, ECMAScript
|
Geplaatst op 30-06-2022 21:36:37