Weści z frontu część 2 — Webpack
W poprzednim wpisie podejmowaliśmy parę decyzji, dotyczących naszego wyimaginowanego projektu frontendowego. Dziś, umotywuję jedną z nich.
Bez zbędnych ceregieli, opisywania historii, wstępów i upiększeń. Przejdźmy do rzeczy. Co będziemy robić poprzez webpacka
- Zarządzanie zależnościami
- Budowanie paczki docelowej
- Ładowanie obrazków , SASS-ów, fontów itd
- Transpilacja
- Serwer deweloperski i integracja z przeglądarkami
Zarządzanie zależnościami
Pytanie: jak dołączyć do projektu bibliotekę angular?
Dodać do HTML-a coś takiego:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Ok. Lub lokalnie
<script src="libs/angular.min.js"></script>
jeśli zainstalujemy angulara przez npm-a (bo bower już jest nie fajny)
<script src="node_modules/angular/angular.min.js"></script>
OK. Fajnie, ale oznacza to, że "na produkcje" musimy przenieść dokładnie taką strukturę katalogów. Co więcej zawartość katalogu node_modules jest większa niż nasze potrzeby:
-rw-rw-r-- 1 michal michal 343 lip 22 17:29 angular-csp.css -rw-rw-r-- 1 michal michal 1187559 lip 22 17:29 angular.js -rw-rw-r-- 1 michal michal 160048 lip 22 17:29 angular.min.js -rw-rw-r-- 1 michal michal 56905 lip 22 17:27 angular.min.js.gzip -rw-rw-r-- 1 michal michal 430959 lip 22 17:29 angular.min.js.map -rw-rw-r-- 1 michal michal 133 lip 22 17:29 bower.json -rw-rw-r-- 1 michal michal 48 lip 22 17:27 index.js -rw-rw-r-- 1 michal michal 1074 lip 22 17:27 LICENSE.md -rw-rw-r-- 1 michal michal 2396 lis 9 21:52 package.json -rw-rw-r-- 1 michal michal 1885 lip 22 17:27 README.md
Będziemy potrzebować do tego narzędzia, ale musielibyśmy się trochę napocić z konfiguracją w większym projekcie.
OK. to zobaczmy jak to wygląda w webpacku
Tu jest inaczej. Mamy jeden pliczek główny(lub kilka, ale o tym może w następnym wpisie). Nazwijmy go index.js Od niego wszystko się zaczyna, jest punktem wejścia. A co w środku?
require("angular");
Tak. takie coś powinno dać radę(!!!!!) Zapewni że pliki angulara znajdą się w naszym projekcie, zostaną odpowiednio przetworzone i spakowane.
Tak postępujemy z bibliotekami. Podobnie załączamy inne nasze pliki, podając ścieżkę relatywną
require("./appModule.js");
Oczywiście nic nie stoi także na przeszkodzie, aby zależności umieszczać także w innych plikach niż plik główny. Utworzony w ten sposób łańcuch zależności zapewnia spójność aplikacji, ale także zapewnia że pliczki których nie chcemy, nigdy nie znajdą się w paczce. Mowa np. o plikach z testami.
Budowanie paczki docelowej[
Mamy łańcuch zależności, który zapewnia nam budowanie paczki. Tylko , co w tym wypadku oznacza budowanie?
W konfiguracji webpacka podajemy miejsce docelowe i......
michal@cośtam:~/fakePath$ ls -lh dist/ -rw-rw-r-- 1 michal michal 1,1M lis 12 10:08 build.js -rw-rw-r-- 1 michal michal 1,5M lis 12 10:08 build.js.map -rw-rw-r-- 1 michal michal 460 lis 12 10:08 index.html
Tak może wyglądać przykładowy wynik działania webpacka. Wszystkie zależności znalazły się w pliku build.js.
(idąc za podanymi przykładami znalazłaby się tu biblioteka angular, nasz plik appModule.js, oraz to, co w index.js)
Dodatkowo w plik index.html wstrzyknięto tag src z naszym "buildem".
Ot takie proste! Wszystko czego potrzebujemy jest zawarte w jednym pliku!
Ładowanie obrazków , SASS-ów, Fontów itd
Oprócz ładownia plików JS możliwe jest także ładowanie innych typów plików. Obrazów, fontów, arkuszy Sass itd. Mechanizm jest ten sam.
var url = require("file!./file.png"); require("./style.scss"); // zmienną url możemy wykorzystać później
Obrazki załadowane bezpośrednio w kodzie HTML także zostaną dołączone
<img class="media-object" src="./cat.jpg" alt="..." height="100">
To nam daje naprawdę szereg nowych możliwości. Na czele z największą zaletą:
W podejściu komponentowym, jesteśmy w stanie w jednym folderze źródłowym zamknąć wszystkie pliki potrzebne dla danego komponentu. Kod, style, szablon html, obrazki .... Słowem wszystko w jednym miejscu . Wystarczy tylko dodać "require" do naszego kodu i gotowe!
Transpilacja
Możemy także skonfigurować nasz system w ten sposób, żeby dokonywał transpilacji naszych plików przed dołożeniem ich do pliku wyjściowego. W tym celu moglibyśmy skorzystać wspomnianego w poprzednim wpisie babel js, lub wykorzystać język Typescript.
Odpowiednie ustawienie loaderów ( o tym mowa za chwilę) pozwoli nam w 100% pracować w TS, oraz wykorzystać znane z TS odpowiedniki "require" w postaci "import"
oto przykład pliku index.ts (TS !!!!)
import "angular"; const externalModulesNames:Array<any> = [ 'ngAnimate', 'ngSanitize', ]; var baseModule = angular.module("App" , externalModulesNames);
Serwer i integracja z przeglądarkami
Jeśli jeszcze nie jesteś przekonany, to teraz pewnie już będziesz :) Webpack oferuje zintegrowany serwer WWW, dzięki czemu twoja aplikacja uruchomi się automatycznie. Co więcej - jeśli otworzysz 5 przeglądarek z adresem uruchomionego serwera, i będziesz sterował aplikacją na jednej, wszystkie 5 będzie się synchronizować. I tak. Mowa tu także o urządzeniach mobilnych, czyli możesz w jednym czasie testować WSZYSTKO!
Opowiadać można by długo. Najlepiej zobaczyć to wszystko w "w akcji".
Zapraszam do pobrania projektu testowego i uruchomienia go poleceniami:
npm intstall npm start
( uwaga - może wystąpić problem z instalacją sass-a. Użytkownicy linuxa powinni mieć zainstalowane w systemie gcc, U żytkownicy windowsa narzędzia do budowania c++ )
Nie wspomniałem o konfiguracji, sposobie działania, loaderach itd. To dlatego że pełno jest na ten temat materiałów. Zanim zaczniesz się tego wszystkiego uczyć warto jest zobaczyć korzyści na własnej skórze.
Do następnego!
PS. jest to druga część. część pierwsza tu: KLIK Projekt na githubie KLIK I jakby kogoś interesowała konfiguuracja webpacka w nim to polecam przeczytanie plików w folderku webpack( lub zaczekanie do następnego wpisu :) )