W poprzednim odcinku dowiedzieliśmy się co to jest Node (pobieżnie) i do czego służy NPM. Dowiedzieliśmy się, by zainstalować framework lub rozszerzyć nasz serwer o dodatkowe funkcje wystarczy polecenie npm install i kłopot z głowy.

A co jeżeli byśmy chcieli zainstalować jQuery? Albo Twitter Bootstrap? Albo jakąś inną kliencką bibliotekę, którą chcemy wykorzystać w aplikacji?

W Visual Studio za pomocą nuget instalujemy paczkę o odpowiedniej nazwie i ona nam już trafia do odpowiednich folderów. Ale NPM jest przeznaczony do server-side i rozszerzenia noda o nowe możliwości. Ale zaraz, przecież w NPM jest jQuery – tak, prawda. Ale jest tam jako paczka, która trzeba z buildować – nie jest ona tam, by udostępnić nam bibliotekę kliencką, ale po to byśmy mogli sami sobie stworzyć nasz własny jQuery :)

Lukę tą – pomiędzy server side packages a client side packages zapełnia Bower.io.

Bower Logo
Bower A package manager for the web By Twitter

Bower jest menadżerem paczek klienckich i umożliwia nam pobieranie takich paczek jak jQuery, angular, itp.

By móc z niego korzystać musimy jednak go zainstalować:

npm install bower -g

od tej pory, do naszej dyspozycji będzie dostępna komenda bower (bower help da nam pomoc).

Podobnie jak z npm mamy do dyspozycji klika komend – dosłownie, te podstawowe w ogóle się nie różnią od siebie :)

bower init

stworzy nam plik bower.json w którym możemy opisać naszą paczkę, jeżeli będziemy chcieli ją publikować jak i da nam możliwość przechowywania zależności (od jakich paczek nasz projekt jest uzależniony) – nie jest to wymagane, ale jest przydatne. Tak naprawdę możemy to co instalujemy wrzucić do repozytorium, ale trzeba zwrócić uwagę na plik .gitignore bo często się zdarza, paczki bower zawierają nazwy plików lub katalogów, które są przez GIT ignorowane.

bower install <package name>

zainstaluje nam package name paczkę w katalogu bower_components (wyszukać paczkę możemy przez stronę jak i za pomocą komendy search). To co fajnego jest w bower a czego mi brakuje w nuget, to możliwość konfiguracji gdzie będą instalowane nasze zależności (nie wiem jak wy, ale ja nieznoszę katalogu Scripts – kod który piszę napewno do skrytpów się nie zalicza :)).

touch .bowerrc
notepad .bowerrc

i wpisujemy:

{
    "directory": "sciezka/do/katalogu"
}

Teraz, jeżeli zainstalujemy paczkę za pomocą install, trafi ona do katalogu który określiliśmy. Bardzo przydatne w szczególności, że każdy z nas ma swoją ulubioną strukturę katalogów.

Podobnie jak w npm, jeżeli chcemy zaktualizować plik bower.json by zawierał on zależności to:

bower install <package name> --save

bower install <package name> --save-dev

Ponownie, --save wtedy kiedy jest to niezbędne do uruchomienia aplikacji, --save-dev jeżeli do jej rozwoju.

Jeżeli nasz plik bower.json już zawiera odpowiednie wpisy to możemy wykonać polecenie

bower install

tak jak w npm spowoduje to zainstalowanie wszystkich zależności z uwzględnieniem .bowerrc.

Aktualizacja paczek zainstalowanych też jest prosta:

bower update

Jak widać, wykorzystanie bower nie jest trudne, a przyspiesza on naszą pracę niezmiernie. Mi osobiście podoba się też pomysł rozdzielenia paczek serwerowych i paczek klienckich na dwie różne aplikację. Chociażby dla tego, że z bower mogę korzystać w rozwiązaniu .NETowym i nie pociąga to za sobą instalowania pełnego rozwiązania (paczki nodowej, której bardzo często nie da się wrzucić do repozytorium ze względu na limit znaków w ścieżce 255 – TFS) tak jak to robi npm. Jedynie instalowane są te biblioteki, które są mi potrzebne do pracy, plus mogę to instalować tam gdzie chcę – a nie tam gdzie MS mi mówi, że mam :)

A wy, korzystaliście już z bower? Co sądzicie o podziale – server side vs client side?

6 KOMENTARZE

  1. Bower, to bardzo fajne narzędzie. Jednak często jest pakowane to paczki o wiele za dużo niż trzeba. Pliki do zbudowania paczki nie zawsze wszystkich interesują. Czasem wystarczyłby sam plik js z bilbioteką, a nie cała otoczka razem z nią.

  2. [email protected]**

    true, tez mnie to wkurza. Ale szczerze, nie przejmuje sie co tam trafia, tak jak nie interesuje mnie katalog `packages` w nuget. nie zagladam do niego, niech sobie siedzi co chce.

    klopot chyba jeden jest taki z bower, ze nigdy nie wiesz gdzie ten plik ktory chcesz zalaczyc sie znajduje i trzeba grzebac :)

  3. [email protected]**

    :)) wyprzedzasz serie to kilka postow ;) bedzie tez i o tym :)

  4. Bower po to m.in. powstał by nie wrzucać zewnętrznych komponentów do repozytorium. Dotyczy to także npm.
    Narzędzia te oferują bardzo dobre zarządzanie wersjami instalowanych komponentów, tak że ma się nad tym dokładna kontrolę.
    Tylko nuget ma z tym jakies problemy.

Comments are closed.