|
|
Opublikowano 30.06.2022 20:04:02
|
|
|
|
Wymagania: Wdroż kod front-end projektu (Angular, Vue) do środowiska produkcyjnego i projekt jest gotowyProces kompilacji kompresuje i zaciemnia kodJeśli plik mapy zostanie wygenerowany podczas kompilacji, możemy użyć pliku mapy do zlokalizowania lokalizacji pliku źródłowego.
Czym jest Sourcemap?
Mapa źródłowa to w zasadzie plik informacyjny, który przechowuje odpowiadające im informacje o lokalizacji przed i po konwersji kodu. Rejestruje lokalizację kodu źródłowego przed konwersją odpowiadającą skompresowanemu kodowi i stanowi mapowanie między kodem źródłowym a produkcyjnym. Sourcemap rozwiązuje problem, że podczas pakowania kod jest kompresowany, despacedowany, kompilowany i przekształcany, co skutkuje niemożnością debugowania z powodu dużych różnic między kodami.
Rola Sourcemap
Mówiąc wprost, Sourcemap buduje most między kodem wstępnym a postprocessingowym, ułatwiając lokalizację miejsc, gdzie pojawiają się błędy w produkcji. Ponieważ dzisiejszy front-end jest modułowy i oparty na komponentach, łączenie i kompresowanie plików JS i CSS przed uruchomieniem może łatwo powodować zamieszanie. Funkcją sourceMap jest umożliwienie panelu debugowania przeglądarki mapowaniu wygenerowanego kodu na plik kodu źródłowego, a deweloperzy mogą debugować w pliku kodu źródłowego, co znacznie ułatwi i uprości debugowanie programistom.
Najpierw stwórz nowy projekt w Angular i napisz problematyczny kod.
Kod html wygląda następująco:
Kod TS brzmi następująco:
Na etapie rozwoju, jeśli wystąpi błąd, bardzo łatwo jest zlokalizować niewłaściwe miejsce, jak pokazano na poniższym rysunku:
Zbuduj projekt w pakiecie release i wygeneruj plik mapy za pomocą następującego polecenia:
Wdroż powstały plik na serwerze HTTP, takim jak IIS, Nginx itp. MiędzyczasiePrzenieś plik mapy do innego katalogu, wygodne do testowania.
W tym momencie nie możemy intuicyjnie zobaczyć komunikatu o błędzie ani kodu źródłowego, instalujemy "Source Code Locator Tool" za pomocą następującego polecenia:
Wprowadzenie do parametrów:
Usage: sl [options]
Options:
-v, --wersja wyjściowa numer wersji
-p, --source-flie-path Wygenerowany plik źródłowy skompilowany plik mapy
-l, --ine Numer linii w wygenerowanej linii kodu skompilowanej przez źródło
-c, --kolumna Numer kolumny w generowanym źródle
-h, --help wypisz informacje o użytkowaniu
(Koniec)
|
Poprzedni:Wyodrębniaj cały tekst z pliku PDF za pomocą C# (obsługuje .NET Core)Następny:Znajomość JavaScript na front-endzie powszechnie określany jako ES6, ES8, ES 2017, ECMAScript
|
Opublikowano 30.06.2022 21:36:37