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/
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 die
bower.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.