Narzędzia JavaScript Full-Stack Web Developera: Własne skrypty

0:00W temacie naszego manifestu projektu i pliku package.json

0:03musimy nieco dłużej zatrzymać się w temacie skryptów.

0:06Mianowicie, tak jak już powiedziałem, powinniśmy zadbać o to, aby nasz projekt

0:10był opatrzony w odpowiednie skrypty, które będą odpowiedzialne za wykonywanie różnego

0:15rodzaju akcji związanych z budowaniem, uruchamianiem, testowaniem czy innymi

0:20akcjami, które muszą zostać wykonane w ramach naszego projektu.

0:24No i tutaj musisz wiedzieć, że w

0:25niektórych sytuacjach te skrypty mogą być zdecydowanie bardziej zaawansowane niż

0:30zwykłe uruchomienie aplikacji poleceniem node index js.

0:34Z tego powodu jest teraz przynajmniej kilka wątków, o których musisz wiedzieć i

0:37przynajmniej orientować się, w jaki sposób możesz je wykorzystywać.

0:42Jeżeli uruchomimy ten projekt z pomocą Sublime Text, no to w tej chwili tak w

0:46zasadzie nie mamy tutaj nic oprócz pliku Package.json.

0:49I tutaj pierwszą rzeczą, o której musisz

0:51wiedzieć jest możliwość wykonywania skryptów w odpowiedniej kolejności.

0:55Przykładowo tutaj zapiszemy sobie skrypt, który powie, że jest pierwszy

1:00natomiast drugi i tak uruchomi się przed nim.

1:03Efekt końcowy będzie taki, że jeżeli uruchomimy sobie teraz polecenie npm run

1:07first, no to w praktyce ten nasz skrypt niestety nie będzie pierwszy, ponieważ

1:12przed nim wykona się ten, który posiada przedrostek pre.

1:15Oznacza to, że analogicznie jesteśmy w

1:17stanie wykorzystać tutaj przedrostek post i w takiej sytuacji, pomimo tego, że znowu

1:22wykonujemy tylko jedno polecenie, tak naprawdę wykonamy dwa.

1:25W ten sposób jesteśmy w stanie budować

1:27skrypty, które zamiast odwoływać się do siebie np.

1:30w taki sposób, nadal będą w stanie wykonywać się w odpowiedniej kolejności.

1:35Ostatecznie jednak, jeżeli zmienimy tutaj

1:37nazwę na secont i tutaj również, no to rezultat końcowy będzie dokładnie

1:41taki sam, z tą różnicą, że skrypt secont w tym przypadku wykona się jako drugi

1:46i nie ma w tym nic szczególnego, bo po

1:48prostu został zapisany w takiej kolejności.

1:50Jednocześnie tutaj jeszcze istnieje

1:52możliwość przekazania do niego dodatkowych argumentów.

1:55Na przykład jeżeli zrobilibyśmy teraz tak,

1:57czyli przekazujemy tutaj zmienną o wartości

1:59Adam, no to jesteśmy w stanie odwołać się do niej poprzez $ a następnie npm

2:04config oraz nazwę tej zmiennej w tym przypadku name.

2:07Tutaj ponownie, jeżeli wrócimy do naszego terminala i uruchomimy nasze polecenie, no to

2:12w rezultacie ponownie wykonał się pierwszy skrypt, a następnie do drugiego została

2:16przekazana wartość Adam i została wyświetlona bezpośrednio w komunikacie.

2:21I teraz jeszcze w tym momencie możemy

2:23analogicznie posługiwać się zmiennymi, z tą różnicą, że zamiast wykorzystywać tutaj

2:27npm config name możemy wykorzystać npm package config name.

2:32W takiej sytuacji wartość zostanie odczytania z właściwości config,

2:36w przypadku której

2:37również możemy zapisać klucz name wskazujący na moje imię.

2:41Jeżeli teraz ponownie uruchomimy sobie ten

2:43skrypt, efekt końcowy będzie taki sam, z tą różnicą jednak, że wartość nie została

2:48odczytana z pierwszego skryptu, tylko bezpośrednio z konfiguracji Package.json.

2:53Efekt widać na załączonym obrazku.

2:56Ostatnim wątkiem w tej lekcji, który

2:57chciałbym poruszyć jest temat zmiennych środowiskowych.

3:00Jeżeli teraz utworzymy sobie plik .env to jak wiesz wewnątrz niego jesteśmy w

3:05stanie przechowywać różnego rodzaju zmienne np.

3:08numer portu, na którym działa nasza aplikacja.

3:11Jeżeli jednak chcielibyśmy przykładowo

3:13utworzyć plik index.js, który będzie sercem naszej aplikacji, a następnie tutaj

3:17spróbujemy odwołać się do tej zmiennej poprzez process.env.port

3:22no to w takiej sytuacji, jeżeli będziemy chcieli uruchomić naszą aplikację,

3:26niestety wartość ta nie zostanie poprawnie odczytana.

3:30Jeżeli masz jakiekolwiek doświadczenie z Node.js to prawdopodobnie znasz

3:33paczkę .env, którą można podłączyć do naszej aplikacji.

3:37Jednocześnie jest dla niej bardzo dobra

3:39alternatywa w postaci env-cmd, którą możemy teraz zainstalować, w

3:43przypadku której mamy znacznie większe możliwości kontroli nad naszymi plikami ze

3:47zmiennymi środowiskowymi, a do jej wykorzystania jedyne co potrzebujemy

3:51zrobić, to po prostu poprzedzić nasz skrypt następującym poleceniem.

3:56Jeżeli teraz ponownie uruchomię moją

3:58aplikację, no to jak się pewnie domyślasz będziemy mieć tu wartość naszego portu.

4:02I teraz jeżeli chodzi o env-cmd, bardzo

4:05istotną kwestią, którą on tutaj rozwiązuje jest problem dotyczący Windowsa.

4:09Otóż bardzo często zdarza mi się, gdy pracuję z osobami pracującymi na

4:13Windowsie, że projekt w ogóle nie chce im się uruchomić właśnie ze względu na to, że

4:18pliki środowiskowe nie są poprawnie odczytywane.

4:20W przypadku env-cmd o takich problemach nie ma mowy.

4:24W temacie kilku takich praktycznych

4:26wskazówek dotyczących pisania skryptów to by było na tyle.

4:29Mam nadzieję, że okazały się dla Ciebie przydatne.

4:32A jeżeli zastanawiasz się w jaki sposób w

4:33ogóle możesz je wykorzystywać poza oczywiście takim ręcznym uruchamianiem

4:37tych skryptów, no to za jakiś czas będziemy zajmować się publikacją naszej aplikacji

4:42na serwerze produkcyjnym i tam będziemy wykorzystywać procesy automatyzacji całego

4:47uruchomienia i deploymentu naszej aplikacji na serwerze produkcyjnym

4:50i w takiej sytuacji umiejętność pisania skryptów okaże się bardzo pomocna.

4:55Co więcej, w tym temacie nie powiedziałem

4:57jeszcze swojego ostatniego słowa, więc zapraszam Cię do

4:59kolejnej lekcji.