EcmaScript 6: Korzystanie z modułów w przeglądarkach

0:00Dowiedziałeś się już w jaki sposób pracuje się z modułami, czyli jak coś eksportować i

0:04importować na wiele różnych sposobów i to co ci pokazałem jest zawarte

0:08w specyfikacji EcmaScript. Natomiast sam fakt, jak to powinno zostać zaimplementowane

0:13w różnych środowiskach, na przykład przeglądarkach internetowych, już w tej specyfikacji

0:17nie jest zawarty, dlatego przez bardzo długi czas nie było w przeglądarkach

0:21możliwości ładowania w natywny sposób takich modułów. Ja

0:26ci jednak pokazałem, że możemy operować na modułach w przeglądarce i w chwili

0:30kiedy te słowa wypowiadam, to możemy w przeglądarce Safari pracować z modułami bez

0:34problemu. Natomiast w innych przeglądarkach musimy sobie taką opcję uruchomić i

0:38pokazałem ci jak w Chrome Canary możemy uruchomić sobie to za

0:42pomocą właśnie Chrome config czy Chrome flags. No i teraz gdybyśmy

0:46sobie przeszli na stronę Can I use i tutaj wpisali module, to możesz

0:50zobaczyć właśnie, że tylko Safari wspiera te moduły, również na iOS,

0:54czyli na urządzeniach mobilnych. Natomiast w innych przeglądarkach można je uruchomić za

0:59pomocą odpowiedniej flagi. Tak jest tutaj w Internet Explorerze, czyli w zasadzie w wersji

1:03Edge. To już nie jest Internet Explorer. W Firefoxie oraz w Chrome, czyli

1:08możemy sobie to włączyć, aby to przetestować, ale jak widzisz nie jest to jeszcze technologia gotowa

1:12do tego, abyśmy mogli naszą aplikację wstawić do internetu i aby użytkownicy

1:16mogli z nich korzystać, bo tylko jeżeli ktoś będzie korzystał z Safari, to wszystko

1:21będzie działać poprawnie, w każdej innej przeglądarce bez włączenia tych odpowiednich flag, niestety

1:25nie będzie to działać. Ten problem można oczywiście obejść i później zrobimy

1:29to z użyciem webpack'a, czyli będziesz mógł pisać te nowoczesne moduły, tak jak ci pokazałem,

1:34a webpack jest to takie narzędzie, które odpowiednio je wszystkie połączy do

1:38jednego pliku i wszystko będzie okej. Natomiast chciałbym jeszcze kilka słów w

1:42tej lekcji wspomnieć na temat tego, jak dokładnie te moduły działają, w tej specyfikacji

1:46html, czyli w przeglądarce właśnie jeżeli chodzi o ten element o typie module. Być może

1:52oczywiście kiedy ty ten kurs oglądasz tutaj na tej stronie Can I use, wygląda to zupełnie

1:56inaczej i te moduły są już dobrze wspierane. Ja ci tylko pokazałem w lekcji wprowadzącej

2:00do modułów, że możemy sobie dodać i gdybyśmy sprawdzili źródle strony do

2:05skryptu, typ module. Nie jest to typ text ukośnik

2:10JavaScript, ale typ module i wtedy w takim module będzie dostępne słowo

2:14import lub export. Dodatkowo ważne jest to, że te moduły

2:18mogą się pojawiać w różnych miejscach tutaj w naszym kodzie. Mamy w jednym miejscu, ale mogłoby

2:22ich być więcej i ważne jest to, że one się zachowują tak jak skrypty, które

2:26mają atrybut defer. Nie wiem czy kiedykolwiek do skryptu taki atrybut dodawałeś, ale

2:30to oznacza, że przeglądarka wczytując taką stronę, normalnie jeżeli widzi

2:35skrypt, to ona wczytuje cały ten skrypt i blokuje dalsze renderowanie strony. Natomiast

2:39jeżeli zobaczy atrybut defer, to ona tak naprawdę będzie dalej wczytywać stronę, ale

2:43skrypt zacznie pobierać i wykona go dopiero wtedy kiedy wykona

2:48się zdarzenie dom content loaded, czyli tak naprawdę kiedy całe drzewo dokumentu

2:52będzie gotowe, to wtedy taki skrypt się wykona i jeszcze mamy taką pewność,

2:56jeżeli wiele mieliśmy skryptów z atrybutem defer, że one się wczytają czy

3:01wykonają według kolejności. Jeżeli jeden zajmował 5 kilobajtów, a drugi na przykład 100, to

3:05one mogły się w różnej kolejności pobrać, ale z atrybutem defer one się wykonają

3:09w odpowiedniej kolejności. Mówię o tym atrybucie dlatego, że skrypt

3:13o typie module, taki jak tutaj domyślne zachowuje się tak, jakby miał

3:17nadany atrybut defer, czyli nie ważne ile będziemy mieli tych skryptów, one

3:22wszystkie wykonają się dopiero wtedy, kiedy DOM, czyli drzewo dokumentu

3:26będzie już gotowe, kiedy będzie można nim manipulować, a także wykonają

3:30się w odpowiedniej kolejności w takiej w jakiej zostały tutaj umieszczone w kodzie

3:34i teraz chciałem ci pokazać jeszcze tylko jeden przykład. Mamy nasze skrypty

3:38i mamy tutaj w utils array i string, czyli jakieś

3:42funkcje ja w tym naszym skrypcie je sobie importuje. Tym razem w taki sposób,

3:46że importuje sobie wszystko jako arrayUtils i stringUtils. Pamiętasz,

3:51że taki import zaimportuje nam wszystko w formie obiektu, więc później w formie obiektu

3:55mogę do tych poszczególnych metod, które są tutaj się odwoływać i teraz będę

4:00chciał sobie ten kod przenieść do modułu, czyli w mojej aplikacji to

4:04działa tak, że jeżeli tutaj do tego index coś wstawimy, może pamiętasz, witaj. To

4:08nam się na naszej stronie pojawia w tym miejscu, więc jeżeli to

4:12byśmy odświeżyli, to to witaj się pojawiło tutaj i w tym miejscu moglibyśmy też wstawić skrypt,

4:16więc wstawmy sobie tutaj skrypt, który będzie miał typ module i będę

4:22chciał wyciąć wszystko z naszego skryptu, który

4:26był w tym miejscu, czyli już tego modułu nie ma i wstawimy

4:30sobie to tutaj do tego indeksu, czyli zauważ co tutaj się dzieje. Jeżeli teraz to zapiszemy

4:35i odświeżymy, ten moduł pojawił się w tym miejscu, czyli przeglądarka wczytuje tutaj

4:39całą stronę. Jeżeli zobaczy takie importy to ona pobierze sobie dodatkowe pliki. Z

4:44tym, że teraz pojawił by nam się taki problem, że ona będzie chciała te pliki odebrać

4:48relatywnie do tego miejsca w którym to widzi, czyli zauważ że nie

4:52jesteśmy w skrypcie, tylko właśnie w module, czyli tak naprawdę jesteśmy

4:56pod takim adresem i relatywnie do tego adresu przeglądarka będzie ona sobie

5:00pobrać to, co tutaj widzisz i to spowoduje nam tak naprawdę błąd. Po

5:05prostu nic tutaj nie zadziała, gdybyśmy przeszli sobie do Network, zobaczymy.

5:10Sprawdźmy

5:14co tutaj nam zostało pobrane. Jak widzisz, failed to load response data. Ja

5:18mu serwer skonfigurowałem tak, no właśnie tutaj widzimy adres, że jeżeli będziemy

5:23chcieli pobrać sobie niepoprawny plik, to zostajemy przeniesieni tak naprawdę to adresu

5:27początkowego, czyli do 01 tutaj w przykładach. Zobaczymy czy tak nam to zadziała

5:31i tak też się stało. Dlatego te skrypty się nie pobrały poprawnie. Musielibyśmy

5:36tutaj podać poprawną ścieżkę, więc możemy to zrobić w tym przypadku podając

5:40sobie całą taką ścieżkę, czyli to by było 55 i w

5:47tym przypadku naszym byłoby to później start js utils. Zobaczmy

5:53czy teraz to będzie mieć sens, console.log i

6:00teraz wszystko działa, czyli pamiętaj, że te ścieżki tutaj są bardzo ważne i to

6:04co jest jeszcze super ważne to jeżeli chodzi o moduły w przeglądarce, to

6:08one mogą rozpoczynać się tak naprawdę tylko od takiego slash'a. Chodzi

6:13mi o te i ścieżki. Nawet jeżeli mieliśmy to zapisane tutaj w tym skrypcie, gdybym

6:17to cofnął, to jeżeli pracujemy z modułami w przeglądarce, czyli

6:21z tym skryptem o typie module, to poprawny adres tutaj w from

6:25może się zaczynać od slash'a, to znaczy, że od początku chcemy

6:30tak naprawdę tej domeny, tak jak zrobiłem to tutaj, czegoś wyszukiwać, od kropki

6:34i slash'a, to znaczy, że w tym samym katalogu lub na przykład dwukropek to

6:38oznacza jeden katalog wyżej. Tutaj moglibyśmy zrobić drugi katalog wyżej i tak dalej,

6:42czyli nie możemy tutaj napisać na przykład od razu import from array, chociaż

6:48wiesz, że jeżeli na przykład robimy sobie skrypt na stronie, gdybym

6:52tutaj wstawił normalny skrypt, to w src moglibyśmy sobie podać

6:56array js. Tu oczywiście nie byłoby to poprawne. Mam tylko na myśli to atrybucie

7:00src nie musimy podawać czegoś takiego, tylko jeżeli podamy tak, to

7:04znaczy, że ten plik znajduje się w tym samym miejscu co jakby cały ten dokument, który

7:08taki plik wczytuje. Natomiast jeżeli chodzi o moduły, to jest ważne, aby zapamiętać,

7:12musimy tutaj podać ścieżkę, która albo się zaczyna od takiego ukośnika

7:16albo która się zaczyna od kropka ukośnik, dwie kropki

7:20ukośnik lub na przykład, i to jest bardzo ważne, od całego adresu, razem

7:25z protokołem http. Jeśli zatem chciałbyś tutaj załadować sobie jakieś

7:29moduł i miałbyś do niego pełny adres, to również możesz to zrobić właśnie wpisując to

7:33tutaj i na koniec jeszcze jedna bardzo ważna rzecz. Zobacz, że jeżeli ten

7:37skrypt jest ładowany na stronie, w naszym przypadku i podejrzymy źródło strony, to mogłoby

7:41się wydawać, że to co tutaj wpiszemy będzie tak naprawdę też globalne, czyli

7:45gdyby mu otworzył jakąś zmienną, to że ona mogłaby przeciekać do tego globalnego zakresu. Pamiętaj

7:50jednak, że jeżeli skrypt jest o typie module, to na pewno wszystko co w nim jest będzie

7:54prywatne i nie będzie widoczne nigdzie w globalnym zakresie. Wspomniałem

7:59wcześniej, że skrypty o typie module zachowują się tak jakby miały atrybut defer.

8:03Natomiast jeżeli słyszałeś o atrybucie async, który można dodać do skryptu,

8:07to można go również dodać do takiego skryptu o typie module. Gdybyśmy tutaj dopisali

8:11async, to zachowałby się to wszystko tak, że dany moduł

8:15byłby wczytany tak szybko, jak się pobierze z internetu. Byłoby to lepiej

8:19widać w przypadku takiego adresu, bo ten się nawet nie musi pobrać, on jest tutaj od razu wpisany. Natomiast gdybym

8:25tutaj dopisał atrybut async, to mówimy pobierz ten skrypt i wczytaj

8:29go tak szybko, jak to tylko pobierzesz. Natomiast mamy gwarancję, że te moduły, które wewnątrz

8:33byłyby importowane, tak jak na przykład tutaj, też moszą się poprawnie wczytać. Natomiast

8:37gdybyśmy pod spodem mieli drugi skrypt, to nie mielibyśmy już gwarancji, że najpierw się

8:41wykona ten, a potem ten drugi. Natomiast, jeżeli nie dodamy tego async, tylko

8:45tak jak tutaj widzisz, moglibyśmy mieć kilka takich modułów, to na pewno wykonają się one

8:49w odpowiedniej kolejności. Tak jak wspomniałem z atrybutem async można zrobić

8:53tak, że on się wykona kiedy tylko się pobierze, ale nie będzie czekał na inne moduły

8:58załadowane w osobnych plikach, czyli z użyciem script. To

9:02by było zatem tyle, jeżeli chodzi o moduły, będziemy z nim jeszcze pracować z użyciem webpack'a, który

9:06pozwoli nam pisać ten nowoczesny kod i wszystko będzie bundle'ował, czyli składał do

9:10kupy, można powiedzieć, do jednego pliku, który będzie można podłączyć w przeglądarce i wtedy

9:14nie będziemy martwić się o to, czy przeglądarka wspiera moduły czy nie.