JavaScript: Bundlery kodu

0:00W tej lekcji powiem Ci czym są bundlery kodu i skorzystamy z jednego z nich.

0:05Na początek pokażę Ci jaki mamy problem.

0:07Mam stronę w html do której podłączyłem sobie plik main.js

0:10taki jak już wcześniej widzieliśmy.

0:13Czyli mam tutaj pobrane z użyciem npm luxon,

0:16chciałbym sobie to zaimportować i z tego skorzystać.

0:19I w lekcji poprzedniej skorzystaliśmy z tego z użyciem Node.js, natomiast teraz

0:23chciałbym to samo wykonać w przeglądarce internetowej.

0:26No i tutaj będziemy mieli pewien problem.

0:28Natomiast na początek musimy zrobić jedną rzecz.

0:31Otóż mamy w tym pliku package.json, wylistowany ten luxon i będę chciał

0:35sobie to zainstalować, żeby faktycznie pojawił się tutaj katalog node_modules.

0:39Więc będąc w terminalu wpiszemy ls albo dir na windowsie żeby wyświetlić katalogi

0:43i to ważne żeby przejść do tego katalogu bundlery kodu.

0:47Tutaj teraz mamy plik package.json i katalog src gdzie umieściłem naszą

0:50stronę i wpiszemy po prostu npm install i to polecenie sprawi, że pojawi się katalog

0:56node_modules, więc mamy pewność, że ten luxon na pewno się zainstalował.

1:00I teraz jeżeli z użyciem live servera otworzę sobie tę stronę,

1:03przejdę do src, to zobacz mamy taki błąd, że require is not defined.

1:08I to właśnie jest ta różnica środowisk.

1:09Jeżeli będziemy chcieli taki plik wykonać w przeglądarce to przeglądarka uzna, że

1:13nie wie co to jest funkcja require, że takiej funkcji nie posiada.

1:17Natomiast środowisko Node.js

1:19ta funkcja jak widziałeś była i ona

1:21potrafiła znaleźć w tym katalogu node_modules to czego szukamy i odpowiednio nam to

1:26zwrócić, aby dalsza część naszego kodu mogła z tego korzystać.

1:30Co zatem musimy zrobić?

1:31Są dwie rzeczy, które trzeba zrobić i ja Ci je teraz pokażę.

1:33Po pierwsze musimy sobie tutaj do tego

1:36skryptu dodać taki typ type module i o tym dokładnie powiem w kolejnej lekcji

1:41także na razie nie będziemy tego dokładnie

1:42omawiać, bo chcę skupić się na czymś innym.

1:45I następnie tutaj musimy skorzystać nie z require, ale z importu z użyciem tzw.

1:49ESM, czyli ECMAScript modules

1:51to też będę omawiał w kolejnej lekcji.

1:53Czyli robi się to tak, że piszemy import,

1:57następnie tutaj trzeba będzie powiedzieć DateTime, czyli tak jakby zrobić taki

2:01destructuring from luxon. W ten sposób to trzeba będzie

2:06zrobić i wtedy bezpośrednio na tym DataTime będziemy mogli z tego korzystać.

2:10Zapiszę to i zobaczmy w przeglądarce.

2:12I teraz już mamy zupełnie inny błąd.

2:14Chodzi tutaj o to, że nie podaliśmy

2:15poprawnej ścieżki, bo takie moduły, które są dostępne w przeglądarce oczekują, że

2:20jak ten plik się wczytuje i tutaj mówimy, że importujemy luxon

2:23to, że podamy tutaj jakąś relatywną

2:25ścieżkę do pliku, który gdzieś się tutaj znajduje.

2:28Przeglądarka nie jest w stanie po takiej

2:29nazwie stwierdzić, że ma tego gdzieś szukać w katalogu node_modules itd.

2:34Więc do tego właśnie potrzebujemy tak zwanego Bundlera kodu, który ten kod tak

2:38zamieni, aby przeglądarka mogła wszystko poprawnie sparsować.

2:42Czyli można powiedzieć, że potrzebujemy

2:44takiego programu, który po uruchomieniu przeczyta sobie to co tutaj jest, znajdzie w node_modules

2:50w ten luxon i w taki odpowiedni sposób go wyciągnie do osobnego pliku

2:54i zmodyfikuje ten plik, że w przeglądarce ten plik.

2:57Jeżeli zerkniemy na źródło strony, jeżeli przeglądarka ten plik będzie

3:01wczytywać to tutaj musi mieć ten zapis import troszkę inny, właśnie taki przeprocesowany.

3:06I w tym celu skorzystamy z bundlera kodu, który nazywa się Snowpack.

3:11Wybieram właśnie ten bundler, chociaż mamy

3:13wiele innych popularnych takich jak Webpack czy Parcel,

3:16dlatego, że Snowpack jest bardzo, bardzo szybki, jest bardzo dynamicznie rozwijany

3:20i ja sam osobiście z niego korzystam, więc

3:22tego snowpacka musimy sobie zainstalować aby wykonał za nas tą pracę, o której

3:26powiedziałem przed momentem. Czyli klikamy sobie tutaj

3:29i jak widzisz można go zainstalować z

3:30użyciem npm, ale zrobimy npm install i dopiszemy tutaj taką flagę save-dev

3:37i to sprawi, że on się zainstaluje normalnie

3:39tutaj do node_modules, ale zostanie dodany

3:41do pliku package.json w takim kluczu devDependencies a dependencies.

3:46Działać to będzie identycznie, ale dobrze jest oddzielać te zależności, które są jakby

3:50potrzebne do naszego kodu źródłowego programu

3:53o tych zależności, które są potrzebne w czasie developmentu, bo później możemy np.

3:58odpowiednim poleceniem zainstalować sobie tylko te zależności, które są tak jakby produkcyjne,

4:03albo wszystkie zależności również z tymi developmenckimi.

4:06Niemniej jednak działać to będzie tak

4:07samo, jeżeli ten Snowpack znalazłby się również tutaj.

4:10No i teraz w node_ modules oprócz luxon powinniśmy mieć jeszcze Snowpacka,

4:14może to po prostu odświeżę, ok, w ten sposób.

4:17I teraz tutaj jak widzisz mamy luxon, ale

4:19mamy również jeszcze inne zależności, bo Snowpack się zainstalował, ale on też ma

4:23różne swoje zależności, które zostały tu zainstalowane.

4:26W zasadzie co jest w tym katalogu nie musi nas interesować.

4:29I teraz musimy odpowiednio uruchomić tego

4:30Snowpacka i wskazać mu jakby gdzie jest nasz główny katalog

4:35ten src po to, że jak uruchomimy serwer,

4:37który on nam oferuje, to ten plik zostanie odpowiednio przeprocesowany.

4:41I teraz jeżeli Snowpacka zainstalowaliśmy to

4:44możemy skorzystać z takiego polecenia npx, które się zainstalowało razem z node i npm i

4:49ono pozwala nam uruchamiać paczki, które znajdują się w katalogu node_modules.

4:53Czyli jeżeli wpiszę npx snowpack

4:55w ten sposób to uruchomię właśnie moduł Snowpack, który zainstalowaliśmy i który

4:59znajduje się w tym katalogu. I Snowpack oferuje nam coś takiego jak dev server

5:03i w zasadzie jeśli przejdziemy sobie tutaj Get Started i do Dev Server widzimy, że jest

5:07polecenie snowpack dev, więc my to musimy poprzedzić tym npx żeby snowpacka

5:12uruchomić i on nam uruchomi taki serwer na porcie

5:16jak może zobaczyć localhost 80 80. OK.

5:21Od razu możemy zobaczyć jakieś błędy

5:23i jak widzisz nie do końca nam to działa.

5:24Właśnie z tego powodu, że ja naszą aplikację umieściłem w katalogu src

5:28żeby się nie mieszała z tymi plikami to musimy stworzyć taki plik konfiguracyjny

5:31dla Snowpacka i powiedzieć mu gdzie ta aplikacja jest.

5:34Więc w terminalu nacisnę control C, żeby

5:36to wszystko zatrzymać i sobie wyczyszczę i uruchomimy tutaj,

5:40czy utworzymy teraz tutaj nowy plik, który nazwiemy snowpack.config.js

5:46i jest to taki plik modułu node.js, którym możemy coś wyeksportować pisząc module.exports

5:51i z tego pliku eksportujemy taki obiekt konfiguracyjny.

5:55Snowpack w odpowiedni sposób sobie go znajdzie.

5:57Nie ma tutaj problemu.

5:58I tam wpiszemy coś takiego

5:59jak mount, to można znaleźć w dokumentacji

6:02i mówię, że mój katalog src, bo tak go nazwałem więc tu też podaję src

6:06chce jakby zamontować do głównego serwera do tej głównej ścieżki.

6:10Jeżeli zrobimy coś takiego i jeszcze raz

6:12uruchomimy snowpack dev, to tym razem powinno już to wszystko działać.

6:16Jak widzisz strona się uruchomiła

6:18i uruchomił się nam taki serwer developmencki,

6:21ten mieliśmy tutaj na porcie 5500,

6:23to był ten live serwer z VS Code, a tutaj to

6:26właśnie ten Snowpack uruchomił nam serwer do pracy.

6:28Jak sobie otworzę konsolę to możesz

6:30zobaczyć, że wszystko teraz działa poprawnie. Czyli nasz kod się poprawnie

6:34wykonał, a zatem taki import z katalogu node_modules zadziałał.

6:38No i zastanówmy się co tak naprawdę zrobił Snowpack.

6:40Otóż Snowpack nam tą stronę wyświetlił, czy w

6:43zasadzie udostępnił na serwerze i w momencie jak przeglądarka wczytuje sobie

6:47ten plik i dochodzi do main.js wysyła zapytanie po ten plik, snowpack

6:52wtedy to zapytanie przechwytuje i ten plik

6:54tak modyfikuje żeby przeglądarka go rozumiała.

6:57Zauważ co on zrobił.

6:58Mieliśmy oryginalnie tutaj import DateTime

7:01from loxon i przeglądarka nie wie gdzie to luxon znaleźć, bo tutaj trzeba podać ścieżkę

7:05dokładną do katalogu, w którym coś takiego się znajduje.

7:08A Snowpack zrobił coś takiego,

7:10że utworzył i my tego tu nie widzimy, bo to jest utworzone w pamięci.

7:14Nawet jak odświeżę to tego tutaj nie ma,

7:16ale Snowpack utworzył sobie właśnie z tego

7:19luxona osobny katalog, który nazywał _snowpack pkg luxon.js i

7:25podmienił tutaj ścieżkę w tym naszym pliku i w momencie jak przeglądarka wczytuje ten

7:29plik to ta ścieżka jest już poprawna i ona potrafi ją znaleźć.

7:32Tak jak wspomniałem my tego tutaj nie

7:34widzimy, bo Snowpack uruchomił sobie taki serwer gdzie to wszystko trzyma.

7:37Niemniej jednak jak najbardziej to teraz

7:39działa. I w ten sposób możemy sobie pobierać z internetu i instalować tutaj do package.json

7:44z użyciem npm najróżniejsze paczki,

7:47następnie w naszym kodzie możemy normalnie je importować właśnie w ten sposób

7:51i za nas właśnie ten Snowpack będzie dbał o to, żeby to tak przetranspilować i tak

7:56pozmieniać, żeby przeglądarka to rozumiała.

8:00Tutaj skorzystaliśmy z takich importów w ES6,

8:03o których jeszcze będę chciał powiedzieć w lekcji kolejnej, ale powiem

8:07Ci, że nie zawsze dobrym pomysłem jest, żeby wszystko było importowane jakby z

8:11osobnych plików, bo to działa w ten sposób, że jak przeglądarka

8:14co możemy tutaj podejrzeć w panelu Network,

8:17odświeżamy sobie,

8:19w momencie jak przeglądarka wczytuje tę stronę to musi wczytać plik main.js

8:23w tym pliku znalazła ten import,

8:26właśnie ten import do luxon i zauważ, że tego luxona też musiała pobrać.

8:30A gdyby w luxon były jeszcze inne importy to

8:32przeglądarka musiała by pobrać bardzo wiele plików.

8:34I czasami lepiej jest żeby te wszystkie pliki zbundlować,

8:38właśnie dlatego mówimy o bundlerach kodu i wstawić do jednego pliku.

8:42Czyli można powiedzieć, że chcielibyśmy tego luxona jakby wyciągnąć, wstawić go

8:46tutaj do naszego pliku i potem dodać do tego nasz kod.

8:49I to również można zrobić z użyciem innych bundlerów, takich jak np.

8:51Webpack

8:52ale Snowpack pozwala nam również na taką operację, kiedy tworzymy tzw.

8:56build produkcyjny.

8:58Jak ten build wygląda będę chciał Ci pokazać w kolejnej lekcji.