[JS] Zarządzaj bibliotekami w wygodny sposób za pomocą Bower.js

Przez ostatni rok sposób tworzenia oprogramowania webowego, takiego jak strony internetowe czy też aplikacje webowe, się znacząco zmienił. Możemy wykorzystać sporo ciekawych narzędzi opartych o node.js (serwer Javascript lub platformę Javascript, jak kto woli).

W jednym z poprzednich artykułów pisałem o tym jak wykorzystanie Grunt.js wpływa pozytywnie na proces tworzenia aplikacji internetowych. W dzisiejszym wpisie chciałbym omówić sposób wykorzystania innego narzędzia, które nazywa się Bower.

Section 1Czym jest Bower?

Bower jest to narzędzie wykorzystywane do zarządzania bibliotekami, które są dołączane do projektów webowych. To znaczy, za pomocą tego narzędzia, z wykorzystaniem linii komend, możesz dołączyć najnowszą wersję bibliotek, takich jak: jQuery czy Backbone.js, do swojego projektu. Dzięki niemu nie musisz martwić o kilka rzeczy:

• Skąd pobrać daną bibliotekę czy rozszerzenie?
• Czy dana biblioteka jest aktualna?

Bower pomaga w dwóch wyżej wymienionych problemach. Tylko tyle i aż tyle.

Section 2Bower - instalacja

Bower wymaga do działania serwera Javascript - node.js. Jeśli mamy go zainstalowanego, to w linii komend, w terminalu, musimy wpisać komendę:

npm install -g bower

Section 3Bower - wyszukiwanie bibliotek i ich instalacja

Gdy już mamy zainstalowane narzędzie - Bower, to możemy przystąpić do pobierania wymaganych przez nasz projekt bibliotek. Wyszukujemy ich za pomocą komendy:

bower search [biblioteka]

To zapytanie szuka w repozytorium bibliotek, które w nazwie zawierają słowo z zapytania - [biblioteka]. Na przykład, gdy szukamy rozszerzeń do Backbone.js to wpiszemy komendę:

bower search backbone

W moim przypadku otrzymałem następującą listę (widok z Windows, kliknij by zobaczyć pełny widok):

Oprócz wyszukiwania bibliotek/rozszerzeń za pomocą linii komend, możesz również poszukać pożądanych plików za pomocą strony WWW, gdzie znajduje się zestawienie plików.

W momencie, gdy udało się nam z powodzeniem znaleźć odpowiednią bibliotekę, możemy ją zainstalować za pomocą linii komend. Dane rozszerzenie można zainstalować na kilka różnych sposobów. Najbardziej oczywistym sposobem jest wpisanie nazwy wyszukanej biblioteki:

bower install marionette

WAŻNE! W przypadku korzystania z Bowera w systemie Windows należy mieć zainstalowaną obsługę repozytoriów GIT. Bez tego Bower nie będzie w stanie pobrać plików z repozytorium (domyślnie pobiera pliki z Github.com).

Pliki możemy też zainstalować na kilka innych sposobów:

Z wykorzystaniem bezpośredniego URL do repozytorium GIT

bower install git://github.com/components/backbone.git

Podając ścieżkę do lokalnego repozytorium

bower install file:///sciezka/do/biblioteki.git/

Z wykorzystaniem skróconej nazwy repozytorium na Github.com

bower install components/backbone

Podając ścieżkę do archiwum

bower install http://adrestrony.pl/download/biblioteka.zip

Za pomocą pliku bower.json

Plik bower.json jest to plik zawierający dane o wymaganych bibliotekach do pobrania. Jest to lista, którą można łatwo przenosić z projektu do projektu nie martwiąc się o jakiekolwiek problemy. Przykładowy zapis wygląda następująco:

1 2 3 4 5 6 7 8 9 10 11 12

{ "name" : "projekt-bower", // nazwa listy "version" : "1.0.0", // wersja listy "private" : true, // jeśli jest ustawione na true, to lista jest prywatna i nie będzie udostępniania społeczności "dependencies" : { // lista bibliotek wymaganych w projekcie "backbone" : "~1.1.0", "marionette" : "~1.5.1" }, "devDependencies": { // lista bibliotek wymaganych w projekcie podczas pracy programistycznej "mocha": "~1.16.2" } }

{ "name" : "projekt-bower", // nazwa listy "version" : "1.0.0", // wersja listy "private" : true, // jeśli jest ustawione na true, to lista jest prywatna i nie będzie udostępniania społeczności "dependencies" : { // lista bibliotek wymaganych w projekcie "backbone" : "~1.1.0", "marionette" : "~1.5.1" }, "devDependencies": { // lista bibliotek wymaganych w projekcie podczas pracy programistycznej "mocha": "~1.16.2" } }

Gdy już wpisaliśmy wybraną komendę instalacyjną w konsoli, nastąpi pobranie biblioteki i zostanie ona zapisana w folderze bower_components - jest to folder domyślny dla narzędzia. Jeśli jednak chcemy zmienić domyślną lokalizację pliku, to musimy utworzyć plik o nazwie .bowerrc i zamieścić w nim następujący zapis:

1
2
3
4

// .bowerrc
{
  "directory" : "lib/js/"
}

W ten sposób, pliki będą pobierane do folderu lib/js/. Więcej opcji konfiguracyjnych można znaleźć w tym dokumencie.

Section 4Bower inne przydatne komendy

Bower jako narzędzie służy do zarządzania bibliotekami w projektach webmasterskich, dlatego też oprócz instalowania potrzebnych bibliotek, pozwala również na ich aktualizację, deinstalację czy instalację bez dostępu do Internetu. Poniżej zamieszczam kilka ciekawych komend:

Listowanie już zainstalowanych plików

bower list

Aktualizacja plików

bower update

Instalowanie bibliotek bez połączenia internetowego (jeśli biblioteka była już instalowana wcześniej na danym komputerze)

bower install [biblioteka] --offline

Deinstalacja biblioteki

bower uninstall [biblioteka]

Section 5Podsumowanie

Mam nadzieję, że ten artykuł zainteresował Ciebie na tyle, żeby dać szansę bowerowi w codziennym użytkowaniu. Jest to narzędzie, które skraca czas potrzebny na szukanie i instalowanie potrzebnych bibliotek w projektach webmasterskich. A dodatkowo, łącząc możliwości bower.js i grunt.js dostajemy do rąk zestaw narzędzi, który sprawia że można się skupić tylko na jednym, czyli na programowaniu.