JavaScript: Moduły ESM

0:00W tej lekcji omówimy jak działają moduły ESM, czyli tzw.

0:03ECMAScript Modules.

0:05To jest coś, co jest wspierane w przeglądarkach internetowych, ale od wielu

0:08lat było wykorzystywane w ten sposób, że pisaliśmy kod używając tych modułów

0:12mimo tego, że przeglądarki ich nie wspierały, a następnie z użyciem bundlerów

0:16kodu, te moduły były tak zamieniane i tak pakowane, że przeglądarka otrzymywała plik

0:21JavaScript, gdzie tych modułów po prostu nie było.

0:23One były spakowane w jeden plik, który przeglądarka rozumiała.

0:27Natomiast to co Ci pokazałem w lekcji

0:28poprzedniej pokazuje Ci, że tak naprawdę przeglądarki rozumieją już te moduły

0:32a mówiąc o modułach mam na myśli to, że możemy coś importować i eksportować

0:36i jak to robić chcę Ci pokazać w tej lekcji.

0:39Mamy tutaj przykład, który zaczerpnąłem sobie z lekcji o odczytywaniu i formatowaniu daty.

0:44Czyli mamy jakieś trzy funkcje i następnie za ich pomocą formatujemy sobie datę.

0:48Podłączyłem sobie ten plik oczywiście do

0:50strony tutaj zwyczajnie i otworzyłem z użyciem Live Serwera.

0:54Mamy tę stronę i mamy tutaj tą sformatowaną datę.

0:57Niech Cię nie zmyli to, że mamy tutaj package.json i pliki snowpack.

1:00Na razie snowpack tutaj nie ma żadnego udziału w tym co robimy,

1:03to zwykły skrypt podłączony do strony.

1:05I teraz, gdybyśmy chcieli sprawić, żeby

1:07ten kod był modułowy, podzielić go sobie na moduły, czyli wyciągnąć te funkcje np.

1:12do innego pliku, to moglibyśmy tutaj w js

1:14powiedzmy utworzyć plik taki jak utils utilities i np.

1:17helper.js.

1:19I teraz możemy zrobić tak, że te funkcje,

1:21które tutaj są wytniemy do takiego właśnie pliku helpers.

1:25Dzięki temu będziemy mogli je

1:26zaimportować, ale także w innych plikach moglibyśmy spokojnie z nich korzystać.

1:31Wstawiamy je zatem tutaj,

1:32ale to sprawi, że wszystko przestanie działać, bo przeglądarka ma podłączony

1:36tylko ten jeden plik, no i w tym pliku widzi odwołanie do addZero

1:39czy convertMonth, tych plików czy tych funkcji nigdzie nie znajdzie.

1:43Zatem musimy z takiego pliku wyeksportować te funkcje

1:47i robi się to w tych modułach ESM z użyciem takiego słowa export.

1:51Możemy przy takiej funkcji, ale nie tylko

1:53przy funkcjach o czym jeszcze później napisać export

1:56i to oznacza, że z tego pliku one będą

1:58eksportowane. Co jest fajne, to nie wszystko musimy eksportować.

2:02. Np.ta funkcja tutaj korzysta z getMonths, które

2:04jest definiowane wyżej i tylko tę funkcję chcę wyeksportować,

2:08żeby z niej można było skorzystać z tych dwóch w innym pliku

2:11a mogę uznać, że to getMonths nie będzie

2:13można tego zaimportować i z tego korzystać gdzieś indziej,

2:15że to będzie prywatne dla tego modułu.

2:18To jest właśnie fajne, że nie wszystko musimy eksportować.

2:20Skoro eksportuje tylko te dwie funkcje to

2:22mogę je zaimportować tutaj na samej górze wpisując import i żeby

2:27zaimportować takie eksporty muszę podać ich nazwy czyli addZero i convertMonth

2:32i robi się to w taki sposób.

2:33To wygląda trochę jak Destructuring Obiektów.

2:36Więc napiszemy addZero i po przecinku można

2:38podać kolejne, które chcemy z tego modułu zaimportować np.

2:42convertMonth i tutaj musimy powiedzieć from czy i skąd to chcemy zaimportować.

2:47Więc musimy podać ścieżkę relatywnie do pliku, w którym jesteśmy czyli main.js,

2:51musimy wejść do utils i podać helpers.js

2:54A więc podajemy to w ten sposób.

2:55To oznacza ten sam katalog, następnie utils i następnie plik helpers.js

3:02jak zrobimy coś takiego to do tego pliku zaimportujemy tę funkcję.

3:06Ale w przeglądarce jak widzisz, to nie będzie działać z tego powodu, że nie

3:10możemy używać słowa import w pliku, który nie jest modułem.

3:13Jak podłączymy to do strony w ten sposób to nie jest to modułem

3:17musimy dodać tutaj specjalny atrybut type module.

3:20Ten atrybut sprawia, że przeglądarka wie,

3:22że jest to moduł i można tam korzystać właśnie z takich importów.

3:26I teraz w przeglądarce jak widzisz wszystko działa jak należy.

3:28Czyli można powiedzieć, że przeglądarka

3:30zobaczyła sobie ten plik jak go zaczęła wczytywać, zobaczyła

3:34importy i tą ścieżkę utworzyła sobie relatywnie do tamtego pliku

3:38i zobaczymy to w panelu Network,

3:40po prostu pobrała ten dodatkowy plik helpers.

3:42Widzimy to w tym miejscu.

3:44Wspomniałem o tym, że możemy eksportować

3:46jeszcze inne rzeczy z dowolnego pliku, tu też możemy mieć

3:49jakieś inne importy z których korzystamy itd.

3:52Otóż możemy na przykład utworzyć sobie stałą, którą nazwalibyśmy PI i

3:56przypiszemy tutaj Math.PI, czyli po prostu liczba PI.

3:59I załóżmy, że chcemy to wyeksportować.

4:01Albo można od razu napisać export const, albo można na końcu takiego pliku zrobić

4:06eksport i wtedy w takich nawiasach trzeba podać to co chcemy wyeksportować czyli np.

4:10PI.

4:11Zatem jeżeli zrobimy coś takiego to tutaj będziemy mogli to zaimportować

4:16pisząc po prostu PI i wyświetlając to console.log PI.

4:19Zobaczmy.

4:21Tutaj po odświeżeniu jak widzisz ta liczba

4:23się wyświetla, więc można różne rzeczy sobie eksportować.

4:26No i teraz chciałbym jeszcze powiedzieć o

4:27tym, że eksporty mogą być nazwane tak jak te.

4:30Czyli jak wyeksportowaliśmy funkcję, która ma

4:32nazwę addZero to musimy przy importowaniu podać ją w takich nawiasach.

4:36Aczkolwiek można by było tutaj zmienić jej nazwę, czyli np.

4:39padZero.

4:40To można zrobić tak zaimportuj addZero as padZero

4:44i wtedy w całym tym pliku tu gdzie mieliśmy addZero napisali byśmy padZero.

4:49Czyli można też zrobić coś takiego.

4:51Działa to dokładnie tak samo,

4:52natomiast możemy również importować domyślne exporty.

4:56I co jest domyślnym eksportem?

4:57Otóż to co wyeksportujemy z użyciem słowa default

5:00np export default

5:02function albo w przypadku liczby PI moglibyśmy powiedzieć export default PI

5:08i tylko jeden domyślny export może znajdować się w całym pliku, czyli tu

5:11eksportuje te dwie funkcje po nazwie, a domyślnie eksportuje liczbę PI.

5:15Tutaj nie ma to sensu w naszym

5:16przykładzie, ale chcę Ci to pokazać dlatego, że jak eksportujesz coś jako export

5:20domyślny to jak to importujesz i nie podajesz tego tutaj w tych nawiasach

5:26tylko robisz to w ten sposób import PI

5:29tutaj można podać przecinek i zaimportować

5:31kolejne rzeczy. I wtedy będzie to działać dokładnie tak samo,

5:34ale to co jest ważne jeżeli eksport jest

5:36domyślny, to nie musisz go importować po takiej samej nazwie.

5:39Możesz tutaj sobie napisać np.

5:41piNambur w ten sposób i tutaj podstawić piNumber, zobacz.

5:48Zadziała to dokładnie tak samo.

5:50A zatem jeżeli eksport jest domyślny i

5:52taki może być tylko jeden, to importujemy go bez takich nawiasów.

5:55Oczywiście gdybyśmy nie chcieli

5:57pozostałych rzeczy, to wyglądałoby to tylko tak,

5:59i wtedy pod tą stałą, bo to będzie taka

6:01stała otworzona, znajdzie się to, co było domyślnie eksportowane.

6:04Natomiast jeżeli eksporty są takie jak tutaj, że nie piszemy export default

6:08function, bo tak można byłoby też napisać tylko samo export function, to

6:12eksportujemy po nazwie i wtedy importując trzeba to zawrzeć w takich nawiasach i

6:17podać dokładną nazwę, którą jednak podczas importu można zmienić na inną.

6:22Jak zatem widzisz przeglądarki radzą sobie bez problemu z takimi modułami, ale jak

6:25pokazałem w lekcji poprzedniej, jeżeli będziemy mieli po prostu bardzo wiele tych

6:29modułów, to przeglądarka musi pobrać wiele plików.

6:32Dlatego mimo wszystko na dzień dzisiejszy

6:34dobrym pomysłem jest to, aby podczas developmentu pracować w ten sposób, ale

6:38podczas budowania aplikacji do produkcji zbundlować to wszystko do jednego pliku.

6:43I właśnie w tym celu mam tutaj Snowpacka skonfigurowanego tak jak w lekcji

6:46poprzedniej i dzięki niemu będziemy mogli sobie to wszystko zbundlować,

6:50ale muszę przejść do katalogu,

6:51zobaczmy moduły i następnie zainstalować z użyciem npm

6:57install wszystkie zależności, żeby pojawił się katalog node_modules i wtedy będziemy

7:01mogli skorzystać z tego Snowpack. Jak sobie tutaj odświeżyłem explorer

7:05pojawi się node_modules

7:07i skrypty, które wstawiliśmy w lekcji poprzedniej tutaj takie jak Snowpack build pozwolą

7:11nam zbudować tą aplikację wpisując npm run build, ona się cała zbuduje,

7:16pojawi się w katalogu build zobacz i teraz wszystko będzie zawarte w jednym pliku.

7:21Nie będzie już wielu osobnych.

7:23Możemy sobie ten plik uruchomić.

7:24Przejdźmy do build.

7:25Jak widzisz wszystko działa tak samo, ale przeglądarka musiała pobrać wyłącznie

7:28jeden plik, bo do niego zbundlowaliśmy to wszystko.

7:32Podsumowując możesz korzystać z importów i z eksportów, w dowolnym pliku

7:36możesz sobie coś wyeksportować, w innym pliku to zaimportować i z tego korzystać,

7:41natomiast jak importujemy rzeczy podając taką relatywną ścieżkę to wiemy, że

7:44importujemy rzeczy, które gdzieś tutaj mamy w katalogach.

7:47Natomiast jeżeli podajemy nazwę tak jak robiliśmy wcześniej np.

7:50import mieliśmy tam dateTime

7:54from luxon, to jeśli tutaj nie ma właśnie na początku żadnej kropki, żadnej

7:58ścieżki relatywnej to przeglądarka tego nie zrozumie,

8:02ale takie narzędzia jak Snowpack

8:03będą potrafiły to wyciągnąć z katalogu node_modules i w odpowiedni sposób podstawić tak

8:08aby przeglądarka już wiedziała skąd taki plik ma zaciągnąć.