Bower logo

 

Istotną kwestią w procesie tworzenia aplikacji, niezależnie od technologii, jest dobór narzędzi. Obecnie świat front-endu oferuje wiele narzędzi i frameworków, które przyspieszają i ułatwiają proces developmentu, jednak łatwo jest się w tym pogubić. Dlatego też utworzyłem nową kategorię Narzędzia webmastera. Będzie ona zwierać serię artykułów o narzędziach front-endowych. W tym wpisie przedstawię pierwsze z nich – Bower.

Czym właściwie jest Bower? Jest to menedżer pakietów. Coś jak NuGet, tylko że zamiast instalować biblioteki C# bower pomaga zarządzać komponentami JavaScript i CSS.

Czy jest mi to potrzebne? Wyobraź sobie, że tworzysz aplikację webową, która używa X bibliotek js. Każda z tych X bibliotek do działania wymaga Y innych bibliotek. Buduje nam się drzewo zależności. Bower rozwiązuje ten problem i pozwala uniknąć redundancji – każda zależność, jeśli występuje kilka razy, zostanie pobrana tylko raz. Inny przykład – wyobraź sobie że potrzebujesz zmienić wersję konkretnej biblioteki. Jeśli lubisz przeszukiwać repozytoria, rozpakowywać zipy i ręcznie podmieniać pliki – to gratulacje, nie potrzebujesz Bowera 🙂 . Jeśli jednak cenisz sobie swój czas, to zmiana wersji w Bowerze to zmiana jednego numerka w pliku konfiguracyjnym.

Przejdźmy zatem do konkretów. Jak zainstalować Bowera? Potrzebujesz tylko jednej rzeczy – npm. Jest to kolejny (o zgrozo) tool do zarządzania pakietami, który opiszę w innym artykule z tej serii. Na chwilę obecną musisz tylko wiedzieć, że jest ci potrzebny do instalacji innych narzędzi webowych. Npm jest cześcia node.js i najprostszym sposobem na jego zdobycie jest instalacja node’a nodejs.org. Po instalacji warto zaktualizować npm:

Po aktualizacji możemy w podobny sposób zainstalować Bowera:

Jeśli zastanawiasz sie co oznacza parametr  -g, to jest to skrót od global i znaczy tyle, że po instalacji będziesz mógł używać Bowera z poziomu każdego miejsca  w systemie.

Bower pozwala instalować zalezności na 2 sposoby. Możemy po prostu wklepać bower install xxxx  dla każdej biblioteki, natomiast bardziej praktycznym rozwiązaniem wydaje się utworzenie pliku bower.json z pakietami i ich wersjami. Plik ten możemy utworzyć ręcznie, możemy skorzystac też z komendy:

Pojawi się wtedy seria pytań. Jako że plik bower.json jest również podstawą przy tworzeniu własnej paczki do bowera, większość z nich będzie dotyczyć własnie tej kwestii. W przypadku, gdy celem tego pliku jest tylko zarządzanie innymi pakietami, jedyne co jest potrzebne to „name” oraz „dependencies”. Przykładowy plik bower.json może wyglądać następująco:

Widok okna konsoli poleceń po wykonaniu komendy bower install:

bower-output

Jak widać bower zainstalował angulara i bootstrapa, ale również jquery, które jest wymagane przez tego drugiego. Symbol * w pliku bower.json oznacza, że pobrana zostanie najnowsza dostępna stabilna wersja komponentu. Moduły zostały zainstalowane w folderze libs. Domyślnym folderem dla bowera jest bower_components, jednak z przykładzie został użyty inny folder. Jak to się stało? Otóż oprócz pliku bower.json istnieje jeszcze .bowerrc. Jest to plik z ustawieniami samego bowera dla konkretnego projektu. Zawiera on zmienne konfiguracyjne takie jak np. directory, czyli miejsce, w którym mają być instalowane komponenty. Właśnie ten parametr został ustawiony w podanym przykładzie w pliku .bowerrc:

Spójrzmy jeszcze jak wyglądają pobrane komponenty. Weźmy dla przykładu bootstrapa:

bower-bootstrap

W przypadku bootstrapa paczka zawiera pliki źródłowe samego komponentu, jak i folder dist z wersją gotową do użycia. Większość komponentów posiada podobną strukturę i najczęściej będzie nas interesował własnie folder dist. To z niego podepniemy skrypty i style potrzebne do działania danej biblioteki/frameworka.

Na tym kończę pierwszy artykuł z serii o narzędziach webowych. Jeśli zainteresował Cię temat, polecam doczytać sobie o takich toolach jak npm, gulp czy yeoman. Wkrótce również na tym blogu pojawi się kilka postów na ich temat.

 

Share