LearnGetting Started with Bower

There are now more libraries and frameworks available for front-end development than ever before. Nie jest niczym niezwykłym mieć pięć lub więcej takich bibliotek zaangażowanych w jeden projekt. Ale śledzenie wszystkich tych bibliotek i upewnianie się, że są one aktualne może być trudne. Z pomocą przychodzi Bower, menedżer pakietów, który ułatwia zarządzanie wszystkimi zależnościami front-end aplikacji.

W tym wpisie na blogu dowiesz się, jak zacząć i działać z Bowerem. Zaczniesz od zainstalowania narzędzia wiersza poleceń Bower, a następnie poznasz różne polecenia, które są dostępne do zarządzania pakietami.

Zacznijmy!

Instalacja Bower

Bower może być zainstalowany przy użyciu npm, menedżera pakietów Node. Jeśli nie masz jeszcze zainstalowanego npm, przejdź na stronę Node.js i pobierz odpowiednią kopię Node.js dla swojego systemu. Program npm jest dołączony do instalacji Node.js.

Jak już masz zainstalowany npm, otwórz Terminal (lub Wiersz poleceń) i wpisz następujące polecenie:

npm install -g bower

To zainstaluje Bower globalnie w twoim systemie.

Teraz, gdy masz zainstalowany Bower, możemy zacząć patrzeć na polecenia, które są używane do zarządzania pakietami.

Znajdowanie pakietów

Są dwa różne sposoby, na które możesz znaleźć pakiety Bower. Albo używając katalogu komponentów online, albo używając narzędzia wiersza poleceń.

Aby wyszukać pakiety w wierszu poleceń, używasz polecenia search. Po nim powinno nastąpić zapytanie.

bower search <query>

Na przykład, aby wyszukać pakiety zawierające słowo 'jquery’ możesz wykonać następujące czynności:

bower search jquery

To polecenie zwróci całą masę wyników, niektóre z nich są wyświetlone w poniższym wycinku.

Każdy wynik wyświetla nazwę pakietu i punkt końcowy Git. Będziesz potrzebował albo nazwy albo punktu końcowego Git aby zainstalować pakiet.

Instalacja pakietów

Aby dodać nowy pakiet Bower do twojego projektu używasz polecenia install. Należy podać nazwę pakietu, który chcesz zainstalować.

bower install <package>

As well as using the package name, you can also install a package by specifying one of the following:

• A Git endpoint such as git://github.com/components/jquery.git
• A path to a local Git repository.
• A shorthand endpoint like components/jquery. Bower zakłada, że używany jest GitHub, w którym to przypadku punkt końcowy jest częścią po github.com w adresie URL repozytorium.
• Adres URL do pliku zip lub tar. Zawartość plików zostanie wyodrębniona automatycznie.

Możesz zainstalować określoną wersję pakietu przez dodanie znaku funta (#) po nazwie pakietu, a następnie numeru wersji.

bower install <package>#<version>

Zainstalowane pakiety zostaną umieszczone w katalogu bower_components. Jest on tworzony w katalogu, w którym został wykonany program bower. Możesz zmienić to miejsce docelowe za pomocą opcji konfiguracyjnych w pliku .bowerrc.

• bower_components
  • jquery
    • jquery.js
    • jquery.min.js
    • jquery.min.map
    • …
  • modernizr
    • modernizr.js
    • …

  Po zainstalowaniu, możesz użyć pakietu po prostu dodając znacznik <script> lub <link> do swojego znacznika HTML. Chociaż pakiety Bower najczęściej zawierają pliki JavaScript, mogą również zawierać CSS lub nawet obrazy.

  <script src="https://blog.teamtreehouse.com/path/to/bower_components/jquery/jquery.min.js"></script>

  Instalowanie pakietów za pomocą pliku bower.json

  Jeśli używasz wielu pakietów w swoim projekcie, często dobrym pomysłem jest umieszczenie tych pakietów w pliku bower.json. Pozwoli to na instalację i aktualizację wielu pakietów za pomocą jednego polecenia.

  { "name": "app-name", "version": "0.0.1", "dependencies": { "sass-bootstrap": "~3.0.0", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "private": true}

  Prosty przykład powyżej pokazuje plik bower.json, który definiuje niektóre informacje o projektach, jak również listę zależności. Plik bower.json jest w rzeczywistości używany do definiowania pakietu Bower, więc w efekcie tworzysz swój własny pakiet, który zawiera wszystkie zależności dla twojej aplikacji.

  Właściwości używane w tym przykładzie są wyjaśnione poniżej.

  • name – Nazwa twojej aplikacji/pakietu.
  • version – Numer wersji dla twojej aplikacji/pakietu.
  • dependencies – Pakiety, które są wymagane przez twoją aplikację. Powinieneś określić numer wersji dla każdego z tych pakietów, jak pokazano w powyższym przykładzie. Podanie latest, spowoduje, że Bower zainstaluje najnowsze wydanie pakietu.
  • private – Ustawienie tej właściwości na true oznacza, że chcesz, aby pakiet pozostał prywatny i nie chcesz dodawać go do rejestru w przyszłości.

  Gdy już masz skonfigurowany plik bower.json, możesz po prostu wykonać polecenie bower install, aby zainstalować wszystkie pakiety, które określiłeś.

  Bower zawiera poręczne narzędzie, które pomoże ci stworzyć plik bower.json dla twojego projektu. Wykonanie polecenia bower init w korzeniu projektu spowoduje uruchomienie interaktywnego programu, który utworzy plik za Ciebie. Jednakże, nadal możesz potrzebować dodać niektóre pakiety do pliku samodzielnie.

  Uwaga: Aby uzyskać pełną listę właściwości, które mogą być dodane do pliku bower.json sprawdź specyfikację.

  Listing Installed Packages

  Możesz łatwo dowiedzieć się, które pakiety są zainstalowane używając polecenia list.

  bower list

  Następny snippet pokazuje wyjście dla prostego projektu, który używa jQuery, Modernizr i Sass. Zauważ, że Bower sprawdza również, czy dostępna jest nowsza wersja każdego z pakietów.

  Uaktualnianie pakietów

  Uaktualnianie pakietów jest całkiem proste. Jeśli użyłeś pliku bower.json możesz wykonać proste polecenie update aby zaktualizować wszystkie pakiety naraz. Jednakże, narzędzie aktualizacji będzie przestrzegać ograniczeń wersji, które określiłeś w pliku bower.json.

  bower update

  Aby zaktualizować pojedynczy pakiet ponownie użyj polecenia update, tym razem określając nazwę pakietu, który chcesz zaktualizować.

  bower update <package>

  Odinstalowywanie pakietów

  Aby usunąć pakiet, możesz użyć polecenia uninstall, po którym podasz nazwę pakietu, który chcesz usunąć.

  bower uninstall <package>

  Możliwe jest usunięcie wielu pakietów naraz przez wypisanie nazw pakietów.

  bower uninstall jquery modernizr sass-bootstrap

  Podsumowanie

  Menedżery pakietów zrewolucjonizowały sposób, w jaki dzielimy się kodem. Sprawiły, że korzystanie z bibliotek kodu stało się łatwiejsze niż kiedykolwiek wcześniej, a także usunęły wiele z bólu głowy związanego z aktualizacjami.

  Przez długi czas programiści front-end patrzyli z zazdrością na projekty takie jak RubyGems; życząc sobie, abyśmy pewnego dnia i my mieli prosty sposób na zarządzanie zależnościami w projekcie. Bower dostarczył nam tego narzędzia. W miarę jak coraz więcej wspaniałych bibliotek staje się powszechnych w naszych aplikacjach internetowych, złożoność naszych projektów będzie nieuchronnie wzrastać. Bower dostarcza nam sposób na zarządzanie tą złożonością.

  Użyteczne linki

  • Bower
  • Repozytorium GitHub
  • Katalog komponentów Bower
  • bower
  • code
  • javascript
  • web app