LearnGetting Started with Bower

Es gibt heute mehr Bibliotheken und Frameworks für die Frontend-Entwicklung als je zuvor. Es ist nicht ungewöhnlich, dass fünf oder mehr dieser Bibliotheken an einem einzigen Projekt beteiligt sind. Aber es kann schwierig sein, den Überblick über all diese Bibliotheken zu behalten und sicherzustellen, dass sie auf dem neuesten Stand sind. Hier kommt Bower ins Spiel, ein Paketmanager, der die Verwaltung aller Front-End-Abhängigkeiten Ihrer Anwendung vereinfacht.

In diesem Blog-Beitrag erfahren Sie, wie Sie Bower zum Laufen bringen. Sie beginnen mit der Installation des Bower-Kommandozeilenprogramms und lernen dann die verschiedenen Befehle kennen, die für die Verwaltung von Paketen zur Verfügung stehen.

Lassen Sie uns anfangen!

Installation von Bower

Bower kann mit npm, dem Node-Paketmanager, installiert werden. Wenn Sie npm noch nicht installiert haben, gehen Sie auf die Node.js-Website und laden Sie die entsprechende Version von Node.js für Ihr System herunter. Das npm-Programm ist in der Installation von Node.js enthalten.

Wenn Sie npm installiert haben, öffnen Sie das Terminal (oder die Eingabeaufforderung) und geben Sie den folgenden Befehl ein:

npm install -g bower

Damit wird Bower global auf Ihrem System installiert.

Nachdem Sie Bower installiert haben, können wir uns nun die Befehle ansehen, die zur Verwaltung der Pakete verwendet werden.

Pakete finden

Es gibt zwei verschiedene Möglichkeiten, Bower-Pakete zu finden. Entweder über das Online-Komponentenverzeichnis oder über das Kommandozeilenprogramm.

Um auf der Kommandozeile nach Paketen zu suchen, verwenden Sie den Befehl search. Diesem sollte Ihre Suchanfrage folgen.

bower search <query>

Um zum Beispiel nach Paketen zu suchen, die das Wort „jquery“ enthalten, könnten Sie Folgendes tun:

bower search jquery

Dieser Befehl würde eine ganze Reihe von Ergebnissen zurückgeben, von denen einige im folgenden Ausschnitt angezeigt werden.

Jedes Ergebnis zeigt den Namen des Pakets und einen Git-Endpunkt. Sie benötigen entweder den Namen oder den Git-Endpunkt, um ein Paket zu installieren.

Pakete installieren

Um ein neues Bower-Paket zu Ihrem Projekt hinzuzufügen, verwenden Sie den Befehl install. Diesem sollte der Name des Pakets, das Sie installieren möchten, übergeben werden.

bower install <package>

Neben dem Paketnamen können Sie ein Paket auch installieren, indem Sie eine der folgenden Angaben machen:

• Ein Git-Endpunkt wie git://github.com/components/jquery.git
• Ein Pfad zu einem lokalen Git-Repository.
• Ein Shorthand-Endpunkt wie components/jquery. Bower geht davon aus, dass GitHub verwendet wird. In diesem Fall ist der Endpunkt der Teil nach github.com in der Repository-URL.
• Eine URL zu einer zip oder tar Datei. Der Inhalt der Datei wird automatisch extrahiert.

Sie können eine bestimmte Version des Pakets installieren, indem Sie ein Pfund-Zeichen (#) nach dem Paketnamen hinzufügen, gefolgt von der Versionsnummer.

bower install <package>#<version>

Installierte Pakete werden in einem bower_components-Verzeichnis abgelegt. Dieses wird in dem Ordner erstellt, in dem das bower-Programm ausgeführt wurde. Sie können dieses Ziel über die Konfigurationsoptionen in einer .bowerrc Datei ändern.

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

Nach der Installation können Sie ein Paket verwenden, indem Sie einfach einen <script>– oder <link>-Tag zu Ihrem HTML-Markup hinzufügen. Obwohl Bower-Pakete am häufigsten JavaScript-Dateien enthalten, können sie auch CSS oder sogar Bilder enthalten.

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

Pakete mit einer bower.json-Datei installieren

Wenn Sie mehrere Pakete in Ihrem Projekt verwenden, ist es oft eine gute Idee, diese Pakete in einer bower.json-Datei aufzulisten. Dies ermöglicht es Ihnen, mehrere Pakete mit einem einzigen Befehl zu installieren und zu aktualisieren.

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

Das einfache Beispiel oben zeigt eine bower.json-Datei, die einige Informationen über die Projekte sowie eine Liste der Abhängigkeiten definiert. Die bower.json-Datei wird verwendet, um ein Bower-Paket zu definieren, d.h. Sie erstellen Ihr eigenes Paket, das alle Abhängigkeiten für Ihre Anwendung enthält.

Die in diesem Beispiel verwendeten Eigenschaften werden im Folgenden erläutert.

• name – Der Name Ihrer Anwendung/Ihres Pakets.
• version – Eine Versionsnummer für Ihre Anwendung/Ihr Paket.
• dependencies – Die Pakete, die von Ihrer Anwendung benötigt werden. Sie sollten für jedes dieser Pakete eine Versionsnummer angeben, wie im obigen Beispiel gezeigt. Die Angabe von latest veranlasst Bower, die neueste Version eines Pakets zu installieren.
• private – Wenn Sie diese Eigenschaft auf true setzen, bedeutet dies, dass das Paket privat bleiben soll und Sie es in Zukunft nicht zur Registrierung hinzufügen möchten.

Wenn Sie Ihre bower.json-Datei eingerichtet haben, können Sie einfach den bower install-Befehl ausführen, um alle von Ihnen angegebenen Pakete zu installieren.

Bower enthält ein praktisches Dienstprogramm, das Ihnen hilft, eine bower.json-Datei für Ihr Projekt zu erstellen. Wenn Sie den Befehl bower init im Stammverzeichnis Ihres Projekts ausführen, wird ein interaktives Programm gestartet, das die Datei für Sie erstellt. Es kann jedoch sein, dass Sie einige Pakete selbst zur Datei hinzufügen müssen.

Hinweis: Eine vollständige Liste der Eigenschaften, die zu Ihrer bower.json-Datei hinzugefügt werden können, finden Sie in der Spezifikation.

Auflistung der installierten Pakete

Mit dem Befehl list können Sie leicht herausfinden, welche Pakete installiert sind.

bower list

Der folgende Ausschnitt zeigt die Ausgabe für ein einfaches Projekt, das jQuery, Modernizr und Sass verwendet. Beachten Sie, dass Bower auch überprüft, ob eine neuere Version jedes der Pakete verfügbar ist.

Pakete aktualisieren

Das Aktualisieren eines Pakets ist ziemlich einfach. Wenn Sie eine bower.json-Datei verwendet haben, können Sie einen einfachen update-Befehl ausführen, um alle Pakete auf einmal zu aktualisieren. Das Aktualisierungswerkzeug hält sich jedoch an die Versionsbeschränkungen, die Sie in der bower.json-Datei angegeben haben.

bower update

Um ein einzelnes Paket zu aktualisieren, verwenden Sie wieder den Befehl update, wobei Sie diesmal den Namen des Pakets angeben, das Sie aktualisieren möchten.

bower update <package>

Deinstallation von Paketen

Um ein Paket zu entfernen, können Sie den Befehl uninstall verwenden, gefolgt von dem Namen des Pakets, das Sie entfernen möchten.

bower uninstall <package>

Es ist möglich, mehrere Pakete auf einmal zu entfernen, indem Sie die Paketnamen auflisten.

bower uninstall jquery modernizr sass-bootstrap

Abschließende Überlegungen

Paketmanager haben die gemeinsame Nutzung von Code revolutioniert. Sie haben die Verwendung von Code-Bibliotheken einfacher gemacht als je zuvor und haben uns einen Großteil der Kopfschmerzen genommen, die der Umgang mit Updates mit sich bringt.

Lange Zeit haben Front-End-Entwickler neidisch auf Projekte wie RubyGems geschaut und sich gewünscht, dass auch wir eines Tages eine einfache Möglichkeit haben würden, Projektabhängigkeiten zu verwalten. Bower hat uns dieses Werkzeug zur Verfügung gestellt. Da immer mehr großartige Bibliotheken in unseren Webanwendungen zum Einsatz kommen, wird die Komplexität unserer Projekte unweigerlich zunehmen. Bower bietet uns eine Möglichkeit, diese Komplexität zu verwalten.

Nützliche Links

• Bower
• Bower GitHub Repository
• Bower Component Directory

• bower
• code
• javascript
• web app