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 :) )