JavaScript: Jak działa npm

0:00Razem ze środowiskiem Node.js zainstalował nam się w systemie npm.

0:05I npm jest to taki package manager dla JavaScript.

0:08Jesteśmy teraz na stronie npmjs.com

0:11i tutaj pokażę Ci, że możemy

0:12wyszukiwać sobie różnych paczek i omówimy czym takie paczki są.

0:16Czyli wyobraź sobie, że szukasz jakiegoś

0:17slidera, bo chcesz wstawić na stronę obrazki i móc je np.

0:21przewijać. Oczywiście możesz spróbować napisać go

0:24sam, bo znasz już całkiem sporo jeżeli chodzi o Obiektowy Model Dokumentu, ale

0:28często korzystamy z gotowych rozwiązań, które stworzył ktoś inny. Więc np.

0:32jak sobie tutaj wyszukamy slider, to możemy różne rzeczy poprzeglądać,

0:36no i powiedzmy, że znajdziemy tutaj jakiś swiper.

0:39Widzimy, że on jest popularny, bo ma bardzo dużo pobrań tygodniowych, no i tutaj

0:42możesz poczytać jak z czegoś takiego skorzystać np.

0:45jak klikniemy tutaj to widać, że można do

0:47strony podłączyć style i podłączyć sobie taki skrypt

0:50i następnie jak z tego korzystać,

0:52ale jest pokazane również, że można to zainstalować z użyciem npm. I będę w tej

0:56lekcji chciał Ci pokazać jak właśnie instalować tego typu paczki, ale my to

1:00zrobimy na trochę prostszym przykładzie i wyszukałem sobie tutaj luxon.

1:04To jest taka biblioteka do formatowania daty, w ogóle do pracy z datą.

1:08I będę chciał Ci pokazać jak przykład, który mieliśmy wcześniej w kursie

1:11możemy z użyciem takiej biblioteki fajnie sformatować.

1:14Więc tu też jest opisane jak z niej korzystać, no i jak ją zainstalować.

1:18Możemy wpisać npm i albo install luxon, ale

1:21zanim to zrobimy potrzebujemy utworzyć sobie taki specjalny plik Package.json.

1:26A więc przechodząc tutaj mam katalog jak działa npm.

1:29Jeżeli tutaj wpiszę ls lub na windowsie

1:31dir żeby wyświetlić wszystko co tam się znajduje widzimy ten katalog i chcę do

1:35niego przejść wpisując cd i będąc w tym katalogu wpiszemy npm bo

1:40właśnie to polecenie nam się zainstalowało z node init i to nam stworzy taki plik

1:45Package.json. Tutaj się odpowiada na

1:47serię pytań i będziemy musieli w zasadzie tylko niektóre z nich podać.

1:51Jeżeli tutaj bym wcisną enter to nam wyskoczy

1:53błąd, bo domyślnie chce nazwać naszą paczkę.

1:56Jak działa i tutaj spacja npm.

1:58Zobaczmy, będzie błąd, bo nie możemy używać żadnych spacji, więc trzeba to poprawić.

2:03Nazwiemy to jak działa npm, albo

2:05możesz to nazwać dowolnie jak tylko chcesz.

2:07Jaka wersja wybierzemy

2:09domyślnie Enter, Enter, entry point to jest index,

2:12możemy tak zostawić, bo nasz plik sobie nazwiemy index.js,

2:15następnie test command.

2:16Wszystko to możesz tak naprawdę pominąć, autor możesz coś wpisać,

2:20nie musisz.

2:21W zasadzie do samego końca możesz wciskać enter.

2:24Natomiast ważne jest to, że jak to

2:25wszystko się wykona to tutaj zostanie utworzony plik Package.json.

2:29Właśnie taki plik json został stworzony i na jego podstawie npm będzie

2:33wiedział co instalować, gdzie co dodawać itd.

2:36No i te rzeczy, które tutaj podaliśmy są tu wpisane.

2:38W każdej chwili można je zmodyfikować, ale

2:40większość z nich nie ma znaczenia jeżeli nie będziesz publikował paczek.

2:44Czyli ten wspomniany luxon, który

2:45znaleźliśmy jest paczką, którą ktoś opublikował i właśnie musiał ją stworzyć w

2:49ten sposób, że miał taki plik Package.json,

2:52no i tutaj muszą być wpisane wtedy już poprawne

2:55dane po to, żeby można było to opublikować.

2:57Natomiast jak pracujemy dla siebie, to

2:59tutaj nie ma większego znaczenia co wpiszesz, ale ten plik posiadać musimy.

3:04No i teraz co ja bym chciał zrobić?

3:05Chciałbym sobie tego luxona zainstalować, więc można wpisać tutaj npm

3:10install luxon albo skrót to jest npm i luxon, tak jak było na stronie pokazane i

3:15zaraz Ci powiem co tutaj się tak naprawdę dzieje.

3:20Zobacz, kiedy to wszystko się zainstalowało

3:23to po pierwsze do pliku Package.json npm automatycznie dodał taki klucz jak

3:26dependencies czyli zależności i wstawił tutaj luxon w odpowiedniej wersji.

3:31Oznacza to tylko tyle, że teraz ten plik

3:33przechowuje jakie zależności są potrzebne do naszego projektu

3:36zaraz z tego luxon będziemy korzystać.

3:38Dodatkowo to co się stało to

3:40został utworzony katalog node.modules, a w

3:42nim zostały wpisane jakby wszystkie te rzeczy, które zainstalowaliśmy.

3:47Czyli został tutaj stworzony katalog luxon

3:48i w środku znajduje się kod tej biblioteki.

3:51Jak widzisz sporo tutaj jest plików i my z tego wszystkiego możemy korzystać.

3:55Zaraz Ci pokażę jak.

3:56Czyli pobraliśmy sobie z internetu jakąś bibliotekę, która została tutaj zapisana.

4:01Natomiast to, co jest świetne w tym, że

4:03przechowywane jest to w tym miejscu, to jeżeli ten projekt udostępnimy komuś

4:06innemu, to nie udostępniamy tego już z tym katalogiem node.modules.

4:09Zobacz co by było, gdybym ten katalog po prostu usunął.

4:12Tego katalogu nie ma, więc nie mamy już tej biblioteki.

4:15Ale mając tutaj informację o tych

4:17wszystkich zależnościach jakich nasz projekt wymaga, wystarczy, że wpiszemy

4:20tutaj my albo ktoś inny, kto będzie pracował nad tym projektem

4:23samo npm install i npm przeczyta sobie wszystkie zależności, które tutaj są i

4:29pobierze je od nowa, tworząc tutaj katalog node.models.

4:33Musimy tylko odświeżyć.

4:34W zasadzie mogę to zrobić w ten sposób Explorer Refresh

4:38i jak widzisz ten katalog rzeczywiście od nowa został tutaj utworzony. A więc to wszystko

4:42jest pobierane z internetu, z tej paczki, którą ktoś opublikował.

4:46No i teraz jak z takiego luxon skorzystać?

4:49Stworzymy sobie tutaj w naszym kodzie w naszym katalogu plik index.js

4:55i następnie będziemy chcieli ten Luxon sobie zaimportować.

4:57Powiem Ci od razu, że w tej lekcji nie

4:59będziemy wykonywać kodu w przeglądarce, ale w Node.js bo ta biblioteka luxon

5:03jest stworzona tak, że ona nie korzysta z rzeczy specyficznych dla przeglądarek,

5:07będzie działać tak samo w Node.js i w przeglądarce.

5:10Tylko żeby z tego luxon skorzystać i

5:11sformatować sobie datę potrzebujemy tą bibliotekę, która jest tutaj zawarta

5:15gdzieś w node_modules.

5:16W zasadzie w ogóle tam nie musimy zaglądać.

5:18Potrzebujemy ją sobie zaimportować. I w Node.js

5:21możemy importować rzeczy z użyciem funkcji require.

5:25W lekcji poprzedniej pokazałem Ci, że jak

5:27wpisaliśmy require fs to nam zaimportowało taki moduł wbudowany

5:32w File System. Ale jeżeli sobie zrobimy coś takiego luxon require(luxon)

5:37to node będzie automatycznie wiedział, że musi to zaimportować z katalogu node_modules,

5:42bo tam to właśnie przez npm zostało pobrane.

5:45Dzięki temu tutaj pod tą stałą luxon będziemy mieli dostęp do takiego obiektu,

5:49który oferuje nam zgodnie z dokumentacją tego projektu bardzo wiele różnych metod.

5:54No i teraz jeżeli przejdziemy sobie na

5:56stronę tego projektu, to tutaj w sekcji quick tour możemy

5:59zobaczyć, że znajduje się tam coś takiego jak DateTime i now zwróci nam aktualną datę.

6:04Więc teraz będę chciał z tego po prostu skorzystać.

6:07Czyli napiszę sobie const now równa się luxon.DateTime.now

6:12w ten oto sposób.

6:13No i oczywiście możemy sobie to w razie czego podejrzeć co pod tym now się znajduje.

6:17Tutaj uruchomimy sobie z użyciem Node po

6:19prostu ten plik index.js i Node automatycznie pobierze poprzez to require to co znajduje

6:24się w node_modules co zostało zainstalowane przez npm.

6:27Jak widzisz tutaj będziemy mieli taki wynik, który niewiele nam mówi.

6:30Natomiast zgodnie z dokumentacją mamy tam

6:32również taką metodę jak toFormat. I będę chciał teraz zrobić coś takiego,

6:36że wpiszemy sobie w console.log now.toFormat, bo to co my chcemy zrobić to po prostu w

6:42fajny sposób sformatować sobie datę nie robiąc tego ręcznie.

6:45Pokazywałem Ci w tym kursie w rozdziale o

6:47datach jak możemy poszczególne komponenty daty sobie powyciągać i wyświetlić np.

6:5201. 03. 2021

6:55natomiast z użyciem biblioteki luxon możemy to zrobić w dużo łatwiejszy sposób.

7:00I tutaj podajemy taki string z formatem i znowu przejdziemy sobie do dokumentacji

7:05I na takiej stronie znajdziemy jakby

7:06wszystkie takie tokeny do formatowania, które możemy podać.

7:09Czyli jak chcemy wyświetlić dzień, to tutaj znajdziemy sobie taki token jak day,

7:15to będzie tutaj gdzieś wyżej. Dokładnie.

7:17Czyli jak chcemy wypisać dzień bez zera

7:19na początku, my z tym zerem pamiętasz

7:21musieliśmy sami sobie poradzić, to podajemy d,

7:23a jak chcemy z zerem na początku to podajemy dd.

7:26Czyli wystarczy, że teraz podam tutaj dd kropka,

7:29następnie chciałbym wyświetlić miesiąc, więc znajdźmy sobie gdzie to jest.

7:33Poszukamy jakiegoś M.

7:37OK. Tutaj mamy znowu tą samą sytuację.

7:39Jeżeli chcemy miesiąc z zerem na początku podajemy MM.

7:42Ta kropka to jest po prostu nasz znak.

7:43Zamiast kropki możesz zrobić pauzę czy cokolwiek innego chcesz.

7:46I teraz jak będziemy chcieli podać po

7:48kropce jeszcze rok, zobaczmy gdzie tutaj jest rok.

7:51Jest tutaj coś takiego.

7:52Czyli możemy wyświetlić cały rok podając

7:54albo samo y, albo 4 razy y, więc podamy samo y.

7:58No i teraz właśnie to toFormat sformatuje nam aktualną datę w taki sposób, że

8:03będziemy mieli właśnie dzień, miesiąc, rok.

8:06Uruchomimy sobie ten plik jeszcze raz index.js

8:08no i widzisz, dokładnie tak się stało.

8:11No i teraz ja Ci chciałem pokazać tą lekcją.

8:13Po pierwsze, że możemy z internetu

8:15pobierać sobie gotowe paczki kodu, które ktoś inny napisał,

8:18następnie taki moduł możemy zaimportować z

8:20użyciem tutaj node i po prostu z niego korzystać.

8:23Natomiast oczywiście nie zawsze warto

8:24pobierać taką paczkę tylko po to, żeby sformatować jedną datę.

8:27Bo jeżeli ten kod uruchamiali byśmy w przeglądarce internetowej to mielibyśmy

8:31ten problem, że ta paczka będzie zajmowała np.

8:33kilkadziesiąt kilobajtów

8:35i nie zawsze warto jest dodawać tyle kodu

8:36do strony tylko po to, żeby trochę łatwiej coś sobie zrealizować.

8:40Niemniej jednak z wielu takich paczek gotowych rozwiązań będziesz korzystał

8:44i w przypadku Node.js

8:45jak widzisz importujemy je z użyciem require,

8:47natomiast gdybyśmy ten sam kod chcieli

8:49uruchomić w przeglądarce internetowej, potrzebny nam do tego będzie tzw.

8:52bundler kodu

8:53i o tych bundlerach porozmawiamy sobie w lekcji kolejnej.