NPM

NPM

NPM – Node Package Manager. Jeżeli jeszcze tego nie zrobiłeś, możesz przeczytać wstęp do pakietów i zależności WordPress.

Używanie NPM zaczniemy od jego instalacji, co dosyć oczywiste. Są instalatory, Tobie, jako programiście PHP nie muszę chyba nic więcej mówić? Jeszcze tylko należy poinformować phpStorm o obecności Node:

NPM pod kontrolą

Kiedy mamy już to pod kontrolą, możemy być pewni, że phpStorm zadba o nasz NPM i będą razem dobrze współpracować. To co, robimy to na przykładzie wtyczki Hello World? Ja jestem za, a ponieważ pisząc to, siedzę tu sam, uznaję sprawę za przegłosowaną. To co teraz? Stworzymy sobie plik package.json, który będzie zawierał nasze zależności. Dlatego, tak naprawdę, możemy sobie darować linijkę z nazwą i wersją pakietu. Jednakowoż, ponieważ dokumentacja NPM mówi o tym, że są to linijki wymagane, niech im będzie. Nasz plik wygląda tak:

Jak widzicie, phpStorm nic nie robi w związku z tym. Zanotował, rzecz jasna, obecność pliku package.json ale że nie ma w nim (z jego punktu widzenia) nic ciekawego, to nie reaguje. No, w takim razie dodajmy mu coś, co go zaciekawi. Proponuję zacząć od gulpa, gdyż wykorzystamy sobie jego kompilator SASS. Zależności możemy dodać w dwóch polach. Pierwsze to „dependencies”, czyli zależności naszego programu, potrzebne do jego uruchomienia. Drugie pole, z niego skorzystamy, to „devDependencies” – zależności wymagane w procesie tworzenia oprogramowania, ale w momencie jego używania, zbędne. No to…

Jak widzicie, po wpisaniu pierwszej zależności, phpStorm poinformował nas o możliwości jej instalacji. Na razie to sobie darujemy i piszemy dalej. Zwróćcie też uwagę na to, że w momencie pisania nazwy pakietu dostajemy podpowiedzi. Gdy już wybierzemy pakiet, dostajemy podpowiedzi z dostępnymi wersjami pakietów:

Pakiety NPM gotowe do instalacji

Mamy już pakiety gotowe do instalacji. To znaczy te, które będziemy wykorzystywać w tej chwili. Zaledwie pięć, ale bardzo nam się przydadzą, zobaczycie. Co dalej? Zwróćcie uwagę na to, że numery wersji w pakietach phpStorm specjalnie wyróżnił. Dodatkowo, po prawej stronie, na pasku przewijania widzicie żółte kreski. Co to oznacza? Ano to, że phpStorm przekazuje nam jakieś ostrzeżenie. Jakie? O tym, że pakiety są nie zainstalowane. No to kliknijmy sobie „Run 'npm install'” (możemy to również wpisać w konsoli – terminal jest dostępny z wnętrza phpStorm) i zobaczmy co się stanie:

No, trochę się działo! Otworzył się terminal, wpisało się npm install (jak zapowiadał phpStorm) i instalacja ruszyła. Zakończyła się informacją o dodaniu 458 pakietów… ale zaraz, jak to? Przecież w pliku package.json wpisaliśmy ledwie kilka? To prawda, ale ja utworzyłem czystą instalację NPM, która trochę potrzebuje i przy pierwszej instalacji ładuje wszystkie zależności. Jak teraz coś zmienimy w pliku (a zmienimy), to potrwa to o wiele krócej i mniej się będzie działo. No, chyba, że wstawimy coś, co będzie wymagało setek zależności. Ale to nie teraz. Co jeszcze się stało? Pojawił się katalog node_modules oraz plik package-lock.json. Katalog zawiera moduły NPM, które zainstalowaliśmy (łącznie ze wszystkimi zależnościami, przy czym katalogi zależności są zaznaczone pomarańczowym kolorem a te nasze – są szare). Z kolei plik package-lock.json odnotowuje wszystkie zmiany w katalogu node_modules co może przydać się do śledzenia dodawania zależności, modułów itp. w przypadku problemów z debugowaniem kodu. Plik jest generowany automatycznie, zostało to dodane w wersji 5 NPM o ile dobrze pamiętam. Na chwilę obecną, mamy, zapominamy, może się przydać.

Co dalej?

No to się zainstalowały te nasze pakiety i co dalej? No, musimy je jakoś wykorzystać! Zapraszam do przygody z Gulpem 🙂