Asset-Verwaltung mit Bower

Schon länger hatte ich Bower als „Paket-Manager“ für meine Projektvorlage im Auge – einzelne jQuery-Plugins auf GitHub zu verfolgen und von Hand zu aktualisieren wird doch etwas umständlich. Eine Diskussion mit Jens auf Twitter gab mir neulich den nötigen „Tritt“, mir Bower genauer anzusehen und in die Projektvorlage zu integrieren.

Was ist Bower?

Bower ist ein „Paket-Manager für das Web“. Es basiert auf nodejs und git und wird – bereits installiertes nodejs, git und npm vorausgesetzt – ganz simpel über npm install -g bower installiert. Damit hat man Zugriff auf die Bower-Registry, quasi ein Verzeichnis in Bower verfügbarer Pakete.

bower help im Terminal gibt eine kurze Funktionsübersicht aus, bower install in einem entsprechend vorbereiteten Projektverzeichnis startet die Installation der eingebundenen Assets.

Bower liefert übrigens nicht nur Javascript-Bibliotheken und -Plugins, in der Registry finden sich auch z.B. CSS-Frameworks und Sass-Bibliotheken. Im Prinzip kann Bower alles einbinden, was in einem Webprojekt als Komponente denkbar ist – es muss dazu nicht einmal unbedingt in Bower registriert sein, so lange es auf GitHub verfügbar ist.

Der unschätzbare Vorteil an Bower (wie an eigentlich allen Paket-Managern) ist dabei die Auflösung von Abhängigkeiten. Benötigt eine Komponente eine weitere Komponente, um zu funktionieren, die im Projekt nicht direkt referenziert wird, holt Bower deren Archiv mit ab. Einfachstes (wenngleich sehr unrealistisches) Beispiel wäre, zu einem jQuery-Plugin auch gleich die jQuery-Bibliothek einzubinden – Bower kümmert sich jedoch nicht um das Referenzieren der Assets im Quelltext, das muss der Entwickler schon selbst erledigen.

Bower konfigurieren

Auf Dauer möchte man Bower einmalig einrichten und ausführen – dazu legt man sich eine bower.json an. Diese JSON-Datei enthält (ganz ähnlich der package.json von Grunt) quasi eine Liste der Assets, von denen ein Projekt abhängt und die Bower folglich verwalten soll. Will man z.B. jQuery und Modernizr verwenden, sieht das etwa so aus:

{
    "name": "Meine Projektvorlage",
    "version": "0.0.1",
    "main": "",
    "ignore": [],
    "dependencies": {
        "jquery": "~1.10.2",
        "modernizr": "~2.6.2"
    },
    "devDependencies": {}
}

Ich habe noch nicht ausprobiert, ob die im Codebeispiel leeren Werte zwingend nötig sind, aber so sieht das Grundgerüst eine bower.json aus. Ein bower install holt nun die “dependencies” in den angegebenen Versionsnummern von GitHub ab und legt sie (standardmäßig) in Unterverzeichnissen im Verzeichnis bower_components ab.

Will man – wie ich, der bei sowas immer irgendeinen Sonderwunsch auf Lager hat – die Assets in einem anderen Verzeichnis ablegen, braucht man eine Konfigurationsdatei namens .bowerrc im Projektverzeichnis. Diese ist ebenfalls im JSON-Format und sieht bei mir (meine JS-Assets liegen im Verzeichnis scripts der Projektvorlage) so aus:

{
    "directory": "scripts"
}

Damit landet z.B. das jQuery-Archiv in scripts/jquery/. Über die .bowerrc kann man z.B. auch einen Proxy konfigurieren oder die Ausgabe des bower-Kommandos anpassen.