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.
Jak to Node jako środowisko uruchomieniowe?
Mamy sobie plik .js. A w nim jedną linijkę:
|
1 |
console.log(‘Hello my world!’); |
Jak go uruchomić?
Wystarczy wpisać:
|
1 |
node <nazwa pliku> |
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.
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:
- JS Tutorial For Absolute Beginners by Traversy Media – i to polecam zdecydowanie na start, naprawdę świetne wprowadzenie.
- What is Node.js Exactly? – a beginners introduction to Nodejs by LearnCode.academy
- Node JS Tutorial for Beginners by The Net Ninja (dość rozbudowany, na nasze potrzeby wystarczą dwie pierwsze lekcje – reszta dla bardziej zainteresowanych tematem)
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.
Polecam wersję LTS (Long Term Support) – nie tylko w tym przypadku.
Skuteczność instalacji możecie sprawdzić wykorzystując Terminal i polecenie:
|
1 |
node -v |
Zwróci Wam wersję, np.
|
1 |
v6.11.2 |
(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:
|
1 |
npm -v |
Jak wygląda instalacja takich „paczek” node’owych?
|
1 |
npm install <parametry> <paczka> |
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:
|
1 |
npm init |
tworzy potrzebny plik, odpytując nas o jego ustawienia początkowe.
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:
|
1 |
--save / --save-dev |
Dodanej do npm install.
Przy instalacji nowych paczek wykorzystujesz je jako dodatkowe parametry. I tak np. instalujesz TypeScript:
|
1 |
npm install typescript --save-dev |
Polecenie to dodaje TypeScript w wersji instalowanej w projekcie. W pliku package.json pojawia się następujący fragment:
|
1 2 3 |
"devDependencies": { "typescript": "^2.4.2" } |
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
|
1 |
npm install |
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:
|
1 |
npm cache clean |
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:
- Instalacja Node JS.
- Umiejętność instalacji paczek z wykorzystaniem npm.
- Znajomość parametrów –save / –save-dev.
- 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:
