Nuxt.js: Moduły Nuxt

0:00W tej lekcji zajmiemy się tworzeniem. Build.

0:02Poziomów, czyli takich modułów, które służą tylko i wyłącznie deweloperom.

0:08To znaczy nie mają żadnych funkcjonalności w runtime.

0:11Nasi użytkownicy nie będą.

0:12Prawdopodobnie korzystali bezpośrednio z faktu, że korzystamy z tego modułu.

0:18Ale jesteśmy w stanie stworzyć różnego

0:20rodzaju walidację, różnego rodzaju kompilatory czy inne tego

0:24typu rzeczy, które będą uruchamiały nowe procesy.

0:26W momencie kiedy uruchamiamy NPM.

0:29Czyli na cele.

0:32Podczas gdy właśnie nasza aplikacja się.

0:34Przebudowuje tak jak tutaj.

0:36To na tym etapie.

0:38Build moduły są używane.

0:41My w tym przykładzie skupimy się na tym, aby stworzyć build module, który będzie.

0:46Wajda miał zmienne.

0:47Środowiskowe, o których też.

0:48Już mówiliśmy i chcielibyśmy uniknąć

0:51sytuacji takiej, że developer rozpoczynający pracę nad projektem nie ma

0:56tego pliku wypełnionego i zobaczy, że aplikacja nie działa.

0:59Dopiero gdy ją uruchomi i wejdzie na

1:02stronę internetową, czyli na localhost 8000.

1:05Aby uniknąć tego problemu.

1:07Po pierwsze potrzebujemy mechanizmu, który.

1:09Będzie sprawdzał zmienne środowiskowe.

1:12A po drugie, musimy zarejestrować.

1:13Nawet własny Bild moczu.

1:15Aby zrobić to drugie.

1:17Jest to całkiem proste.

1:18Zamknijmy niepotrzebne pliki.

1:21Otwieramy skąd i gdzie jest?

1:23I tutaj musimy stworzyć odniesienie analogicznie do pluginów.

1:30Jakie moduły chcemy załadować?

1:33Jeżeli nie mamy katalogu modules to.

1:35Możemy go sobie tutaj dodać, czyli stworzymy sobie folder models.

1:42I sami. Tam dodamy.

1:44Czyli w moczu.

1:46Chcemy stworzyć nowy plik.

1:49Invalid GS. Jest to też nazwa.

1:52Paczki z której będziemy korzystali do walidacji tych plików.

1:55I oczywiście jako że plik nie istnieje.

1:57To serwer Nexta nam się tutaj wywrócił.

2:01Więc stworzymy ten plik.

2:02Międzyczasie i nazwiemy go tak samo jak tutaj Zadeklarowaliśmy invalid.

2:07I to co trzeba zrobić to trzeba wyeksportować tutaj.

2:10Funkcję export default function.

2:16I na tej funkcji mamy dostęp.

2:18Do kontekstu bez.

2:20Czy gdy zostanie wypełniony w.

2:22Momencie bindowania obiektem rakietowym.

2:25Czyli jeżeli zrobimy sobie tutaj test track czyli next równa się.

2:30Dysk i to się równa.

2:31Dokładnie temu samemu, co byśmy po prostu zrobili Next równa się dysk kropka next.

2:38To będziemy mieli dostęp.

2:39Do różnych właściwości tego next.

2:42Zobaczmy czy to w ogóle zadziała. Console.

2:44Log. Heloł.

2:46Zapiszmy. No i oczywiście.

2:48Musimy uruchomić nasz serwer ponownie.

2:50Bez.

2:53I faktycznie jak zauważycie tutaj chylą.

2:56Się, pojawiło.

2:57I co warto tutaj zauważyć to co się dzieje na wokandzie to się nie.

3:01Dzieje zupełnie blisko frontendu.

3:03Fakt, że wyświetliło się to nam w konsoli. Oznacza.

3:06Że jest to JavaScript uruchamiane po

3:09stronie serwera, w związku z czym nie ma tutaj dostępu do takich rzeczy jak window,

3:13dokument czy inne tego typu zmienne specyficzne dla przeglądarki.

3:18Więc to co możemy zrobić to otworzyć sobie nową.

3:22Kartę. W terminalu i zobaczyć jak.

3:26Tworzy się.

3:27Instancję biblioteki Invalid.

3:30I po prostu kopiujemy. Tutaj ten.

3:32Przykład.

3:36I dostosujemy go do naszych potrzeb.

3:38Czyli importujemy wszystkie potrzebne nam rzeczy.

3:42Z invalid.

3:44Następnie, aby zweryfikować, czy nasz plik.

3:48Konfiguracyjny ze zmiennymi środowiskowymi jest poprawnie ustawiony.

3:52Musimy wywołać.

3:53Funkcję.

3:55I tutaj mamy dodatkowe.

3:57Funkcje, które pozwalają nam analizować typ zmiennych.

4:01W związku z czym przenieśmy to.

4:03Do naszej funkcji, ponieważ to ma się

4:05wykonywać w momencie kiedy max jest faktycznie bile dawane.

4:09Pozbądźmy się tych zmiennych, bo te zmienne nas nie interesują.

4:14I wypełnimy to.

4:15Zmiennymi, które faktycznie powinny znaleźć się w naszym dostępie.

4:19Czyli na tym etapie mieliśmy tutaj tylko.

4:22I wyłącznie te zmienne dotyczące bazy alfa.

4:26Jeśli wrócimy do pliku Elvis Jazz. To możemy teraz.

4:31Wypełnić sobie tutaj te dane.

4:33Komentujemy to na razie.

4:36I czyścimy.

4:42Wtedy będziemy w stanie zdefiniować czy ten klucz.

4:47Ma być kluczem. Wymaganym.

4:49Czy ma być kluczem o typie string.

4:52Czyli ciąg znaków czy jakieś inne.

4:54Czyli domyślnie większość z tych rzeczy

4:57nie powinna być wymagana, ponieważ nie zawsze chcemy.

5:00Mieć username, a z racji, że basic może być wyłączony.

5:05Ale ustawmy to.

5:06Jako wymagane, aby to po prostu przetestować.

5:09I ponownie try.

5:11Jako że będą to wartości tekstowe. I tutaj możemy.

5:14Pobrać jeszcze.

5:16Boli.

5:20Jeżeli jest taka funkcja.

5:22Mam nadzieję, że jest.

5:24I możemy to zapisać.

5:27I po zapisaniu.

5:30I tak naprawdę uruchomieniu.

5:31Tej funkcji robimy sobie jaja.

5:34Jeśli oczywiście zainstalowaliśmy tę paczkę wcześniej.

5:38Jeszcze się upewnijmy, czy to nastąpiło.

5:43NPM.

5:46W odpowiednim katalogu w Wikipedii npm install.

5:51Invalid.

5:53Tu się to. Będzie w międzyczasie pobierało.

5:56No i.

5:57Generalnie mając dostęp do instancji na hosta możemy dostać się do jego opcji.

6:02Czyli jeśli chcielibyśmy, aby to

6:03uruchamiał się tylko i wyłącznie w trybie deweloperskim możemy zrobić np.

6:08next poprzez DF i w tym momencie znajduje się cały nasz.

6:14Next config czyli.

6:16Pod nasz XT.

6:17Poprzez znajduje się to co.

6:19Tutaj mamy pod export default. Czyli będziemy.

6:22Się odwoływali do tej właściwości i.

6:24W zależności od tego czy jest to.

6:28Środowisko deweloperskie.

6:30Czy nie możemy zachować się inaczej?

6:33Chociaż prawdopodobnie zmienne środowiskowe powinny być na obu.

6:39W środowiskach zarówno produkcyjnym jak i developerskim.

6:41Obecne.

6:43Przejdźmy do głównego katalogu.

6:46Gdzie znajduje się.

6:49N.p.m. bez.

6:51I widzimy, że faktycznie Boolean.

6:53Nie występuje jako poprawny typ.

6:55Zobaczmy jakie są. Typy bul.

6:58Bul, bul.

7:00Poprawimy to.

7:01Zapisujemy, uruchamiamy

7:03i oczywiście musimy również zaimportować go pod tą samą nazwą.

7:10Jest całkiem możliwe, że ten skrypt dalej nie będzie działał.

7:13Ale no właśnie.

7:14Tym razem jest to sytuacja pożądana,

7:17ponieważ faktycznie brakuje nam zmiennych środowiskowych i do tego ten.

7:21Moduł był nam potrzebny.

7:23Czyli jeśli sobie tutaj. W n ie.

7:25Ustalimy te wartości i.

7:27Powiedzmy nawet jeżeli ustawimy bezlik

7:30auth enabled na false i tutaj w password damy na.

7:34Password username admin.

7:38Zapiszemy.

7:41I uruchomimy skrypt ponownie.

7:44To widzimy, że tutaj to się jeszcze nie zaaplikował.

7:47Ciekawe czemu?

7:49A dlatego, że to nie jest obiekt.

7:51Zmienne środowiskowe deklarujemy za pomocą znaku równości, nie za pomocą dwukropka.

7:58I ponownie. I w tym momencie widzimy, że to przeszło.

8:00Jeżeli byśmy pozbyli się dowolnej właściwości

8:04z naszego pliku konfiguracyjnego, to nasz proces nie przeszedł by.

8:09W związku z czym.

8:09Oznacza to tyle, że mamy w tym momencie pewność, że niezależnie od tego jaka.

8:15Jest wartość tej zmiennej.

8:16Musi ona być ustawiona.

8:18Aby nasz next zbudował się w ogóle. Co możemy zrobić jeszcze?

8:22Oczywiście to jest bardzo pobieżne.

8:24Potraktowanie tego, co można zrobić z BIOS

8:26modułami, ale jest to faktycznie praktyczny przykład.

8:29Który jest przydatny.

8:31W tym, co można zrobić, pozbądźmy się nieużywanych importów.

8:38I być może w.

8:39Systemie deweloperskim. Tylko i wyłącznie.

8:42W systemie deweloperskim uruchamiamy tą.

8:46Właściwość.

8:48I w tym momencie. Ona się dalej wywoła, ponieważ.

8:57Nasz model jest.

9:00W tym momencie ustawiony na development,

9:03w związku z czym normalnie przechodzimy to i mamy wypełnione informacje.

9:07Jeżeli pozbędziemy się tej zmiennej

9:08środowiskowej ponownie, no to dostaniemy tutaj błąd.

9:11Co można zrobić Jeszcze to wykorzystać?

9:13Właśnie light cegiełki, o których też już troszkę mówiłem.

9:16Aby wyświetlić tutaj informacje w tym panelu next.

9:20Czy jesteśmy w stanie tutaj.

9:21Dodać jakąś treść, jeżeli mamy taką potrzebę?

9:26Jeśli chodzi o nasz, być może nie byłoby to konieczne, ale jeśli chcielibyśmy.

9:36Użyć tej przestrzeni.

9:38Możemy wykorzystać do tego Hook, który też był oczywiście wspomniany w dokumentacji.

9:43On dostaje tutaj.

9:44Różne właściwości jako parametry do funkcji, z których możemy korzystać.

9:49Jeśli chcielibyśmy dodać naszą własną informację.

9:53Na temat tego, czy udało się.

9:56Skompilować projekt pod względem zmiennych środowiskowych.

9:59No to możemy to tutaj umieścić.

10:00Czyli po prostu environment file.

10:05Sims, coffee.

10:08Albo po prostu.

10:09Environment tables sim traffic,

10:13ponieważ możemy ustawiać zmienne środowiskowe nie tylko poprzez plik.

10:18Zapiszemy.

10:20Wyczyściłem ekran, uruchomiłem ponownie.

10:25Alex Token.

10:28Prawdopodobnie wkleiłem tutaj coś co.

10:34Niestety nie.

10:35Pasuje.

10:38Jeden nawias za dużo.

10:40I faktycznie widzimy, że w momencie kiedy

10:43ten huk się wywołał, dostaliśmy informację.

10:46Environment variable sink. Afi.

10:48Jeśli chcielibyśmy.

10:49Moglibyśmy też wyświetlić to w innym

10:52kolorze za pomocą paczki konsola, która też jest wbudowana w build module.

10:57Więc jest to praktyczne użycie.

10:59Build OSów możecie zrobić tutaj różne inne

11:01rzeczy, jak na przykład wykrywanie czy serwis siostrzany.

11:05Na którym nasza aplikacja działa, faktycznie chodzi.

11:10Czy jeśli mielibyśmy zewnętrzne API, z którego pobierali byśmy dane,

11:14to moglibyśmy tutaj stworzyć sobie hooka, który będzie pilnował czy np.

11:19. Wikipedia.

11:20Żyje? Ponieważ jeżeli Wikipedia.

11:23Z jakiegoś powodu będzie. Miała tam time, czyli po prostu nie.

11:25Będzie chodziła, nie będzie online. To nasza aplikacja.

11:28Również nie zadziała.

11:29I to też możemy wykryć na etapie pisma ciosów.

11:32Chociaż wiem, fajnie też się to powinno wydarzyć.

11:35To wszystko w tej sekcji kursu.

11:37W następnej sekcji będziemy zajmować się

11:39faktycznym tworzeniem API i połączeniem się z Wikipedią.

11:43Pod kątem przekazywania danych do naszej aplikacji.