Vollzeitblogger

Bower: ein Frontend JavaScript Paketmanager

September 01, 2013

Bower ist ein Paketmanager für Frontend JavaScript Bibliotheken wie jQuery und auch Frameworks wie Twitter Bootstrap. Um manuellen Downloads

Bower installieren

Sofern man npm installiert hat, beschränkt sich die Installation von Bower auf das Kommando npm install -g bower. Ob die Installation geglückt ist, kann man in einem Terminalfenster durch die Eingabe von bower testen.

Pakete mit Bower installieren

Eine Bibliothek oder ein Paket mit Bower zu installieren ist alles andere als schwer, mit bower install <paketname> werden Pakete installiert.

Beispiel jQuery:

<code>[bowertest]$ bower install jquery
bower cached        git://github.com/components/jquery.git#2.0.3
bower validate      2.0.3 against git://github.com/components/jquery.git#*
bower install       jquery#2.0.3

jquery#2.0.3 bower_components/jquery
</code>

Da bower schon einmal jQuery in Version 2.0.3 für mich installiert hat, ist es noch im lokalen Cache verfügbar. Eine Neuinstallation inklusive Download sieht so aus:

<code>[bowertest]$ bower install zepto
bower not-cached    git://github.com/components/zepto.git#*
bower resolve       git://github.com/components/zepto.git#*
bower download      http://github.com/components/zepto/archive/1.0.0.tar.gz
bower extract       archive.tar.gz
bower resolved      git://github.com/components/zepto.git#1.0.0
bower install       zepto#1.0.0

zepto#1.0.0 bower_components/zepto
</code>

Sowohl jQuery als auch Zepto befinden sich nun in bowertest/bower_components/ und haben den Inhalt der angegebenen git repositories.

<code>[bowertest]$ ls -R bower_components/
bower_components/:
jquery  zepto

bower_components/jquery:
README.md   component.json  jquery-migrate.js      jquery.js      jquery.min.map
bower.json  composer.json   jquery-migrate.min.js  jquery.min.js  package.json

bower_components/zepto:
Makefile   bower.json      composer.json  zepto.min.js
README.md  component.json  zepto.js
</code>

Eine Übersicht über alle derzeit verfügbaren Pakete gibt es unter http://sindresorhus.com/bower-components/

bower_components_repository

Eigene Repositories mit Bower installieren

Anstatt einen Paketnamen, kann man beim install Kommando auch einfach ein git repository angeben, oder eine tar/zip Datei. Das heißt man kann alles mit bower installieren und nicht nur was unter bower search zu

Hier installiere ich zum Beispiel gerade mein kleines Wort/Zeichen-zähl Script über bower, das auf meinem github account zu finden ist:

<code>[bowertest]$ bower install https://github.com/JonathanMH/jmh_wc.git
bower not-cached    https://github.com/JonathanMH/jmh_wc.git#*
bower resolve       https://github.com/JonathanMH/jmh_wc.git#*
bower checkout      jmh_wc#master
bower resolved      https://github.com/JonathanMH/jmh_wc.git#master
bower install       jmh_wc#master

jmh_wc#master bower_components/jmh_wc
</code>

Abhängitkeiten mit bower.json definieren

Da ich oft mit anderen Entwicklern zusammen arbeite, führe ich zuerst den bower init Befehl aus um danach mit bower install <Paketname> --save automatisch die installierten Pakete in diebower.json` Dat

Andere Entwickler können nun mit bower install alle dort definierten Pakete installieren.

<code>[bowertest]$ cat bower.json
{
  "name": "bowertest",
  "version": "0.0.0",
  "authors": [
    "Jonathan M. Hethey <xxxxxx@jonathanmh.com>"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.0.3",
    "underscore": "~1.5.1",
    "backbone": "~1.0.0"
  }
}
</code>

Führt jetzt ein anderer Entwickler bower install aus, werden jQuery, underscore und backbone in das Verzeichnis bower_components installiert.

Fazit

Bower ist ziemlich praktisch um Abhängigkeiten, die sich entweder in irgendeinem git repository oder schon in der Liste der verfügbaren Pakete ist zu installieren und durch einen Befehl und über die Konfigur

Bislang habe ich für diese Aufgabe git submodules verwendet, die sich allerdings manchmal als etwas unpraktisch herausstellen und mehr für Abhängigkeiten die ich selbst geschrieben habe geeignet ist.


© 2023, by Jonathan M. Hethey