JavaScript: Build produkcyjny

0:00Poprzednią lekcję zakończyliśmy na tym, że powiedziałem, że fajnie, że ten bundler takim

0:04jakim jest Snowpack tak nam zmienia ten kod, że przeglądarka go rozumie i te importy tam

0:09poprawnie działają, bo są one wspierane w przeglądarkach internetowych,

0:13natomiast czasami problemem jest to, że

0:14możemy mieć aplikacje gdzie jest naprawdę mnóstwo plików

0:17i jeżeli będziemy chcieli wszystkie te pliki

0:20w taki natywny sposób w przeglądarce serwować, to ona wczytuje jeden plik,

0:23widzi tam odwołanie, import do innego pliku, pobiera kolejny, kolejny, kolejny

0:27i może być tak, że np. kilkadziesiąt plików będzie musiała

0:30przeglądarka pobrać, a będzie to wolniejsze niż gdyby te wszystkie pliki

0:34połączyć w jeden plik i zaserwować go do przeglądarki.

0:37Dlatego z użyciem Snowpacka możemy wykonać tak zwany produkcyjny build i wskazać mu

0:41tam, że chcemy właśnie te pliki odpowiednio połączyć.

0:44A więc do pracy,

0:46czyli podczas developmentu nie ma żadnego

0:48problemu, że te pliki będą serwowane w taki natywny sposób, że przeglądarka

0:51będzie sobie sama je pobierać wszystkie po kolei

0:54dlatego, że będzie to szybkie, będzie to

0:56wydajne i jak najbardziej będzie ok, bo pracujemy lokalnie,

0:59natomiast jak chcemy stronę już uruchomić na serwerze, to najlepiej będzie to

1:02odpowiednio zoptymalizować i przy okazji też zminifikować.

1:05Więc uruchomimy sobie może najpierw to co tutaj

1:07mamy, czyli przejdę do katalogu build produkcyjny i możemy jeszcze raz z użyciem

1:11npx snowpack dev uruchomić sobie ten serwer developmencki,

1:15on nam się tutaj otworzy,

1:17no i ta nasza strona działa.

1:19Ale tak jak wspomniałem patrząc tutaj przeglądarka wczytuje ten plik o typie

1:22module, w nim ma import do kolejnego więc go pobiera,

1:25w nim mogą być kolejne,

1:26tutaj też ich może być więcej itd.

1:29Dlatego teraz skonfigurujemy sobie Snowpack tak, żeby nam wykonywał build produkcyjny.

1:33Podamy tutaj coś takiego jak optimize

1:37i będzie to obiekt, gdzie napiszemy bundle true właśnie po to, żeby nam zbundlowało

1:41wszystkie te pliki do jednego pliku i następnie minify true.

1:44Ale może to zrobimy za chwilę.

1:45Na razie zróbmy sobie false.

1:47I teraz wykonamy polecenie zatrzymując ten

1:49serwer Control c npx snowpack build. Tyle wystarczy i snowpack nam to

1:54wszystko ładnie spakuje i utworzy nam katalog build.

1:58I właśnie w tym katalogu będzie gotowa nasza aplikacja.

2:00Jak widzisz tak to wygląda i możemy ten plik index.html

2:04sobie uruchomić.

2:05My tutaj mamy uruchomiony z VS Code

2:08już wcześniej ten serwer developmencki czyli Live Server,

2:13więc mogę tutaj przejść do build produkcyjny i po prostu do katalogu build

2:16i jak widzisz nasza strona działa dokładnie tak samo, ale jak sobie

2:19podejrzymy co jest w środku to okazuje się, że tutaj jest ten plik main.js.

2:23i wejdźmy do niego i że on wygląda tak. Tutaj zostały dodane właśnie z użyciem

2:28tego Snowpacka różne rzeczy, między innymi cały ten Luxon, z którego korzystaliśmy

2:33został tutaj wstawiony, a więc wszystko znajduje się teraz w jednym pliku.

2:36Jak widzisz całkiem spora biblioteka jeżeli chodzi o ten luxon

2:40i na końcu gdzieś będzie nasz kod, który z tego luxona korzysta.

2:43Jest dokładnie tutaj. Więc akurat ta biblioteka nie była dobrym pomysłem, aby

2:47ją dołączać do strony tylko po to, żeby wyświetlić prostą datę,

2:50niemniej jednak to był tylko przykład jak

2:51możesz zainstalować sobie coś z użyciem npm.

2:54No i bundlowanie polega właśnie na tym, że to wszystko zostało wstawione do jednego

2:58pliku, który powinien być szybciej pobrany przez przeglądarkę niż wiele plików.

3:02Natomiast możemy sobie tutaj dodać jeszcze

3:05jedną opcję, właśnie tą, którą ustawiłem na false.

3:08Ustawimy ją na true, to jest minify

3:10i jak jeszcze raz wykonamy sobie taki build to teraz wszystko będzie zminifikowane.

3:14Jeżeli byśmy podejrzeli ten plik JavaScript,

3:16który tutaj jest, to on jest dla nas już nieczytelny, ale dla

3:19przeglądarki on działa tak samo, bo w języku JavaScript nie ma znaczenia gdzie

3:23sobie zrobisz jakieś odstępy, spacje, wcięcia.

3:25To wszystko co robiliśmy tutaj robiliśmy dla naszej wygody, ale gdybyśmy wszystko

3:29zapisali w jednej linijce, też ten kod działałby tak samo.

3:32A dzięki temu, że jest zminifikowany, to po

3:34prostu on mniej zajmuje, więc szybciej się wczyta.

3:37No i teraz jeżeli raz jeszcze sobie tę

3:39stronę uruchomimy, zobacz, ona znowu działa tak samo,

3:42ale tym razem serwujemy już tutaj plik

3:45zminifikowany. Dokładnie tak to wygląda.

3:47A więc warto pracować sobie z użyciem tego serwera z Snowpack, a później wykonać

3:52build i pliki z katalogu build wstawić na serwer.

3:54Wszystko będzie zoptymalizowane i będzie działać bardzo szybko.

3:58Na koniec pokażę Ci jeszcze, że możemy tworzyć coś takiego co nazywa się npm

4:02script, bo do tej pory nie mogliśmy wpisać po prostu Snowpack i np.

4:07build, bo musielibyśmy Snowpack zainstalować globalnie.

4:09Jest to też możliwe,

4:10można wpisać npm install global snowpack, ale ja wolę te rzeczy instalować sobie lokalnie

4:17dla każdego projektu, więc mamy je zainstalowane lokalnie, czyli po prostu w

4:20katalogu node_modules, ale w pliku, który mamy tutaj, czyli package.json

4:25można tworzyć tak zwane skrypty.

4:27Jeden z takich skryptów automatycznie został tutaj utworzony.

4:30Możemy go spokojnie usunąć całkowicie i zaraz wstawimy nowy.

4:33Chodzi o to, żebyśmy nie musieli wpisywać tego npx,

4:36następnie snowpack dev to ustawimy sobie tutaj dwa skrypty.

4:39Jeden nazwiemy start i tutaj się po prostu podaje komendę,

4:43którą jakby w terminalu chcesz wykonać, zaraz Ci pokaże jak to start w ogóle uruchomić.

4:48Natomiast możemy się tutaj bezpośrednio odwoływać do rzeczy, które są w node_modules.

4:52Więc mogę powiedzieć snowpack i następnie dev. To był ten serwer developmencki.

4:56Nie trzeba tego tutaj poprzedzać tym npx i jak to uruchomimy

5:00za moment to start, to npm wie, że tego Snowpacka

5:04ma sobie poszukać właśnie w node-modules. Czyli to

5:06musi być po prostu zainstalowane wcześniej z użyciem npm install.

5:10Natomiast drugim skryptem, który tutaj wstawimy jest build.

5:13Możesz go nazwać jak chcesz

5:15i wpiszemy tutaj snowpack build, czyli to co już uruchamialiśmy.

5:19I teraz jak się uruchamia te skrypty?

5:21Jeżeli skrypt nazwiesz start to można go tutaj uruchomić wpisując npm start.

5:25Musisz być oczywiście w tym katalogu, w którym znajduje się plik package.json.

5:29Natomiast wszystkie inne skrypty jak mają inną nazwę niż start to uruchamia się je

5:33poprzedzając je słowem run czyli npm run i następnie nazwa czyli np.

5:38build.

5:38Jeżeli coś takiego sobie wykonamy zostanie automatycznie wykonany cały build tej

5:42aplikacji, a jeżeli chcielibyśmy nad nią pracować to wpiszemy po prostu npm start.

5:47Wtedy nie trzeba wpisywać tego run, ale

5:49też można to dopisać, ale jest to taki skrót,

5:51dlatego te skrypty, z których najczęściej korzystasz to wstaw sobie do start.

5:55Czyli jak rozpoczynamy pracę nad naszym projektem wpiszemy npm start, uruchomi się

5:59serwer, przechodzimy od razu do przeglądarki, możemy pracować nad naszą

6:03stroną i co ważne za każdym razem jak coś tutaj zmienimy np.

6:06jakbym tutaj dodał coś takiego i zapisał strona będzie odświeżana

6:10jak widzisz od razu wszystko na stronie widać.

6:12Jak uznamy, że skończyliśmy pracę nad tą

6:14aplikacją zatrzymujemy ten serwer Control C wpisujemy npm run build.

6:19Aplikacja jest budowana, wszystko jest

6:21fajnie bundlowane do jednego pliku no i mamy to w katalogu build.

6:24Możemy to wstawić na serwer.

6:26Nasza praca jest już wykonana.

6:28Jeżeli chodzi o bundlery kodu takie jak

6:29właśnie Snowpack, to one pozwalają nam jeszcze na wiele innych rzeczy z użyciem pluginów.

6:34Na przykład możemy w plikach JavaScript

6:36importować sobie kod CSS, który następnie jest wyciągany i wstawiany do osobnych

6:41plików, które możemy podłączyć na stronie np.

6:43tutaj. Bardzo wiele możliwości oferują bundlery,

6:46ale już nad nimi nie będziemy się pochylać w tym kursie.

6:49W razie czego poczytaj sobie jeszcze

6:51dokumentacje Snowpack, ale myślę, że na początek to i tak wystarczy do tego, żebyś mógł w

6:56nowoczesny sposób pracować i po pierwsze tworzyć własne moduły i je tutaj

7:00importować, a o tym sobie powiemy dokładnie w kolejnej lekcji,

7:03ale po drugie co jest bardzo ważne

7:05importować moduły zainstalowane z użyciem npm.

7:08Jak widzisz w przeglądarce dzięki temu

7:09bundlerowi i dzięki pracy, którą on wykonuje transformując te pliki

7:13wszystko to zadziała bez żadnego problemu.