Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

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 TEŻ ZADZIAŁA! -->

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:KLIKProjekt na githubie KLIKI jakby kogoś interesowała konfiguuracja webpacka w nim to polecam przeczytanie plików w folderku webpack( lub zaczekanie do następnego wpisu :) )

 

internet programowanie inne

Komentarze

0 nowych
  #1 18.11.2016 19:09

Bez JavaScript daleko nie zajedziesz w front-endzie. Czy to TypeScript czy Dart, nie zastąpią JS, a ECMAscrip6 i 7 wprowadza fajne ficzery do tego języka. Pomijam już fakt o istnieniu różnych frameworków typu jQuery, Angular przyspieszających pisanie i tworzenie aplikacji.

molexor   6 #2 20.11.2016 22:34

@Anonim (niezalogowany): hehe , nie rozumiem chyba. Wybacz.
Typescript to jest nadzbior js. Js jest od początku do końca gdzieś we wpisie.
Pozdrawiam