Pakujemy projekt Angular do środowiska produkcyjnego za pomocą komendy build, a oczekiwany efekt może różnić się od tego, co widzimy w naszym środowisku programistycznym.
Kod TS:
AppComponent to obecny komponent.
Wizualizacje środowiska deweloperskiego i środowiska produkcyjnego przedstawiają się następująco:
Środowisko produkcyjne wcale nie było takie, jakiego się spodziewaliśmy.
O danych komend build:
W tym momencie musimy go debugować.
SourceMap to plik informacyjny, który przechowuje mapowanie lokalizacji kodu źródłowego oraz skompilowanego kodu
W pracy front-end jest głównie wykorzystywany do rozwiązywania problemów debugowania w następujących trzech aspektach:
a. Po zamieszaniu kompresja kodu jest mylona
b. Po kompilacji do css lub JS przy użyciu innych języków, takich jak sass i typeScript
c. Po połączeniu wielu plików za pomocą narzędzi pakujących, takich jak webpack
W powyższych trzech przypadkach nie możemy tak łatwo debugować kodu źródłowego jak podczas debugowania, więc potrzebujemy SourceMap, by pomógł nam go przekonwertować na kod źródłowy w konsoli, aby debugować.
Musimy zmodyfikować polecenie budowania, które brzmi następująco:
(Przed dodaniem parametrów)
(Po dodaniu parametrów)
Widać, że generuje się wiele plików *.map.
Jak pokazano na powyższym zdjęciu, użyj Google Chrome, naciśnij F12, aby wejść w tryb deweloperski, wybierz źródło, wybierz main.js, a następnie kliknij prawym przyciskiem i wybierz opcję "Dodaj mapę źródłową", aby dodać adres wygenerowanego pliku mapy.
Na przykład:
http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map
|
Opublikowano 11.08.2020 17:59:35
|
|
|
|
