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 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?
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ą.
**@extstopcodepls**
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 :)
Ciekawym rozwiązaniem, aczkolwiek o trochę innej filozofii jest Browserify: http://browserify.org/ Umożliwia pisanie kodu klienckiego w sposób podobny do tego jakbyśmy pisali aplikację w Node.
**@Raf**
:)) wyprzedzasz serie to kilka postow ;) bedzie tez i o tym :)
@Gutek
mea culpa :D
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.