Ten artykuł jest częścią serii Tworzenie aplikacji webowej: Krok po kroku (7 / 10)

Kolejny temat do ogarnięcia na naszej ścieżce budowy aplikacji webowej.

Od razu zastrzegam, że artykuł bardziej dotyczy NPM niż Node JS. Przedstawiam wiedzę potrzebną do budowy aplikacji. Może kiedyś pochylę się mocniej nad samym Node’m, ale to nie dziś.

Czym jest Node JS?

Najprościej ujmując: jest to środowisko dzięki któremu możemy uruchamiać nasze aplikacje JavaScriptowe. Zbudowany jest na silniku V8, wykorzystywanym również m.in. w przeglądarce Google Chrome.

nodejs home

Strona projektu

Jak to Node jako środowisko uruchomieniowe?

Mamy sobie plik .js. A w nim jedną linijkę:

Jak go uruchomić?

Wystarczy wpisać:

nodejs terminal

Podaję to jako ciekawostkę ponieważ w  naszej aplikacji skorzystamy z możliwości oferowanych przez Angular CLI (ale o tym już wkrótce).

 

Razem z Node JS idzie ogromna paczka modułów. Poprzez ogromna mam na myśli prawie pół miliona (!). Pół miliona bloczków, z których możesz budować swoje aplikacje! Budując aplikacje webowe naprawdę wiele z nich wykorzystujesz.

 

Jak je zainstalować?

Właśnie do tego służy NPM, który jest instalowany razem z Node JS.

npm home page

Strona projektu

 

Gdzie się ich uczyć?

Muszę przyznać, że ciężko było znaleźć mi warte polecenia materiały do nauki Node JS & NPM. Zwłaszcza jeśli chodzi o podstawy.

Ostatecznie polecam następujące tutoriale na Youtube:

Oczywiście również oficjalna dokumentacja do Node JS.

Jeśli potrzebujecie więcej materiałów do nauki Node JS polecam ten artykuł.

 

Ogólnie tak, w naszej aplikacji z Node’a skorzystamy tylko i wyłącznie w celu pozyskania paczek.

 

Jakie kroki będą więc dla Was koniecznością?

Instalacja Node JS

Node JS możecie ściągnąć TUTAJ.

nodejs install

Polecam wersję LTS (Long Term Support) – nie tylko w tym przypadku.

Skuteczność instalacji możecie sprawdzić wykorzystując Terminal i polecenie:

Zwróci Wam wersję, np.

(może być konieczny restart komputera bądź terminalu, jeśli był uruchomiony przed instalacją)

Terminal? Jaki terminal? Zapraszam do wpisu „Command Line – co, gdzie i jak? [Materiały do nauki]”

Gotowe.

Prawda, że nic trudnego?

 

Wraz z Node JS instaluje się NPM. Zainstalowaną wersję możemy sprawdzić analogicznie jak powyżej:

 

Jak wygląda instalacja takich „paczek” node’owych?

Instalacja paczek powoduje powstanie w naszym projekcie folderu node_modules. To tam znajdą się instalowane zależności. Nade wszystko nie wrzucaj tego folderu do zdalnego repozytorium (jak Github, itp.)!

Jakie repozytorium? Jaki Git? Co to Git? I jak się go nauczyć?

Jak wykluczyć coś na stałe? Pomijać przy commitach? Służy temu plik .gitignore. Ale o tym będę jeszcze pisać.

 

Jak to nie wrzucać? To skąd projekt ma mieć te zależności?

Służy temu plik package.json. To on przechowuje informacje o potrzebnych paczkach. Jeden plik, nie cały folder. Jego oczywiście nie ignorujemy 😉

 

Ok. To skąd mam go wziąć?

Polecenie:

tworzy potrzebny plik, odpytując nas o jego ustawienia początkowe.

npm init package json

Kreator podpowiada nam od razu odpowiedzi, jak np. nazwa projektu, propozycja wersji aplikacji, itd. Wszystko możesz ustawić od razu bądź zmodyfikować później zaglądając po prostu do pliku package.json.

W konsoli widzisz początkową zawartość pliku. Dodawanie kolejnych paczek – zmienia tą zawartość. Ale żeby to zrobić potrzebujesz opcji:

Dodanej do npm install.

Przy instalacji nowych paczek wykorzystujesz je jako dodatkowe parametry. I tak np. instalujesz TypeScript:

Polecenie to dodaje TypeScript w wersji instalowanej w projekcie. W pliku package.json pojawia się następujący fragment:

 

Dlaczego –save-dev a nie –save?

–save stosujemy dla zależności, które są niezbędne dla uruchomienia projektu.

–save-dev – dla zależności, które są niezbędne do jego tworzenia, jak np. testy jednostkowe, kompilacja TypeScriptu do JavaScriptu (TypeScript nie ląduje na serwerze, piszemy w nim, ale jest kompilowany do JavaScriptu i to JavaScript ląduje na serwerze), minifikacja, narzędzia badające jakość kodu, itd.

O TypeScript’cie będę pisała już wkrótce.

 

Dobra, mam package.json. Ale jak to ma niby zapobiec konieczności wrzucania node_modules do repozytorium?

Otóż mając ten plik, commitujesz tylko jego.

Osoba, która ściąga Twój projekt, na dzień dobry uruchamia polecenie

Polecenie to instaluje WSZYSTKIE paczki zadeklarowane w package.json.

Więcej. Jest to element, który pomaga nie tylko po zaciągnięciu świeżego projektu z repozytorium. Czasem paczki trzeba zaktualizować, czasem coś usunąć, a czasem coś dodać. Usuwasz wtedy CAŁY folder node_modules. Wyobrażasz sobie teraz wpisywać od nowa npm install dla każdej potrzebnej paczki? Bo ja nie. W przypadku aplikacji webowej zainstalowanych paczek jest przynajmniej kilkadziesiąt, a nawet kilkaset… (kilka tysięcy?)

 

Wskazówka:

Czasem usunięcie npm_modules to za mało. Jeśli masz problem z doinstalowaniem jakiejś paczki, z jakimiś zależnościami, często przydaje się również polecenie:

Skasuj node_modules, użyj powyższego polecenia, spróbuj raz jeszcze.

Zapamiętaj na przyszłość. Może Ci się przydać 😉

 

Więcej w temacie package.json -> Dokumentacja.

 

To, co masz wynieść z tego artykułu:

  1. Instalacja Node JS.
  2. Umiejętność instalacji paczek z wykorzystaniem npm.
  3. Znajomość parametrów –save / –save-dev.
  4. Umiejętność utworzenia pliku package.json i wiedza na jego temat (jako bonus, ponieważ skorzystamy z Angular CLI do stworzenia projektu, który wygeneruje nam również ten plik).

 

Uwagi:

Wiem, że może Was powoli irytować długość ścieżki zanim tak naprawdę zaczniemy coś pisać. Jednak pisanie aplikacji webowej wymaga znajomości i podpięcia sporej ilości narzędzi. Aplikacja sama w sobie nie jest celem. Celem jest pakiet umiejętności jaki dostaniecie po drodze.

Prawdopodobnie wprowadzenia potrwają jeszcze do końca sierpnia. We wrześniu pojawi się już kod 😉

 

W zeszły poniedziałek (21.08.) na Fanpage’u NetteCode odbył się Live powiązany z tematem naszej serii: „Tworzenie aplikacji webowej – od pomysłu do realizacji”. Wszystkich zainteresowanych tematem zapraszam do notatek z tego spotkania.

 

Z kolei w piątek, 18.08. wystartowała grupa wsparcia w zakresie realizacji tego tutorialu. Więcej nt. tego pomysłu przeczytasz w tym wpisie. Do grupy możesz dołączyć klikając poniżej:

Dołącz do grupy tutorialowej!

Series Navigation<< Duża paczka materiałów do nauki JavaScriptuVisual Studio Code na start >>