TypeScript: Source mapy

3.9+

0:00Kontynuując temat pliku konfiguracyjnego pozostały nam do omówienia

0:04jeszcze source mapy na ten moment zakładam że o source mapach słyszałeś

0:08a jeżeli nie to w skrócie są to po prostu zestawy danych na temat

0:12naszego kodu które okazują się szczególnie przydatne w procesie debugowania

0:17jeżeli ten temat interesuje cię bardziej polecam ci przeczytać

0:21artykuł które w tej chwili powinien wyświetlić się na ekran tymczasem

0:25jeszcze zanim przejdziemy do source map chciałbym pokazać ci jeszcze jedną opcję

0:29pliku konfiguracyjnego a konkretnie będzie to noEmitOnError inaczej

0:34mówiąc jak sama nazwa wskazuje w momencie gdy kompilator wykryje jakiś błąd

0:38nie wygeneruje plików javascript aby ci to teraz udowodnić

0:43przejdę teraz do pliku app.ts w którym zdefiniuję sobie funkcję której

0:47argument nie będzie posiadał typu zatem mamy tutaj błąd typescriptu

0:51natomiast sam kod javascript jest jak najbardziej poprawny teraz

0:55gdy spróbuję skombinować sobie ten projekt kompilator poinformuję mnie o błędzie

0:59i jednocześnie w moim katalogu nie pojawiły się żadne pliki javascript

1:04w momencie gdyby ta opcja była wyłączona to

1:08pomimo błędu kompilator wygenerował by pliki javascript no

1:12i mamy tego dowód w tym miejscu zdecydowanie czasem

1:17są sytuacje w których chcemy wyłączyć tą opcję oczywiście jednak

1:21tego nie rekomenduje aby wygenerować source mapy do naszego

1:25projektu ustawiamy opcję sourceMap na true więc nie

1:29ma tutaj jakiegoś szczególnego zaskoczenia jeżeli teraz wygeneruję projekt

1:33no to jak widzisz poza plikiem app.js został

1:37wygenerowany również app.js.map zawiera on wspomniane

1:41przeze mnie informacje które są wykorzystywane w procesie debugowania ale

1:46oczywiście to nie jest tak że na etapie jednego ustawienia kończy się

1:50temat source map mianowicie opcję generowania oddzielnego pliku

1:54z source mapami możemy zastąpić opcją inlineSourceMap dzięki

1:59temu w momencie generowania naszego projektu source mapy zostaną

2:03dołączone bezpośrednio do pliku app.js no i dowód tego mamy

2:08dokładnie w tym miejscu z drugiej strony może okazać się tak że

2:12jednak będziemy chcieli generować zewnętrzne pliki source map ale

2:16czasem mamy potrzebę dołączenia do nich kodu naszego projektu aby

2:21to zrobić wystarczy że ustawimy opcję inlineSources na true no i efekt

2:25będzie taki że po wygenerowaniu naszego projektu zostanie

2:29wygenerowany dodatkowy plik z mapami natomiast jak widzisz tutaj kod

2:33naszego projektu został do nich dołączony no i teraz

2:37ostatnią opcją jeżeli chodzi o source mapy jest opcja mapRoot

2:41bo znowu w niektórych sytuacjach może okazać się że nasze

2:46source mapy trafiają do jednego katalogu a wygenerowane pliki naszego

2:50projektu znajdują się w innym dlatego dzięki opcji mapRoot

2:54jesteśmy w stanie wskazać miejsce w którym znajdą się nasze mapy czyli

2:58jeżeli wygeneruję teraz ponownie projekt to w pliku app.js

3:02w momencie gdy mamy tutaj dołączenia naszych source map mamy

3:06również przekazaną tutaj informację o tym w którym miejscu te mapy się znajdują

3:11naturalnie w tym momencie ten adres jest błędny ale mam

3:15nadzieję że wiesz o co mi tutaj chodzi no i na ten moment kończymy tą

3:19krótką lekcje a ja zapraszam cię do kolejnej