Anfängerhandbuch: Getting Started with Bower Package Manager

Bower ist ein von Twitter entwickelter Front-End-Paketmanager. Auch als Paketmanager für das Web bekannt, wird Bower in modernen Open-Source- und Closed-Source-Projekten verwendet, um viele wiederkehrende Probleme zu lösen.

Dieser Artikel führt Sie durch die grundlegende Verwendung von Bower und die fortgeschrittene Verwendung in einer Teamumgebung. Ich werde auch meinen persönlichen Arbeitsablauf teilen, wenn ich mit bower in einem Team von Entwicklern arbeite.

Probleme, die bower löst

Die Entwicklung einer Website oder Webanwendung erfordert heutzutage die Verwendung vieler Front-End-Frameworks, wie Bootstrap, jQuery, Angular usw.

1. Der Download jedes dieser Pakete erfordert die Navigation auf der entsprechenden Website, die Suche nach der passenden Version, den Download, das Entpacken und schließlich das Verschieben der Hauptdateien in den Herstellerordner. (z.B.: die main-Datei im jquery-Paket ist jquery.js)
2. Nach dem Herunterladen der Dateien in Ihr Repository müssen Sie alle oben genannten Websites (jquery.com, angularjs.com, bootstrap.com) manuell besuchen, um nach Aktualisierungen zu suchen, und raten Sie mal? Wenn es ein Update gibt, müssen Sie Schritt 1 für jedes Paket/Aktualisierung wiederholen.
3. Angenommen, wir verwenden Bootstrap, das jQuery benötigt (sogenannte Abhängigkeit). Wenn Sie zu getbootstrap.com gehen, um es herunterzuladen, müssen Sie dann zu jquery.com navigieren, um auch jquery herunterzuladen.

Zusammenfassend hilft Ihnen bower bei der Verwaltung Ihrer Frontend-Pakete. Es hilft Ihnen, sie herunterzuladen, zu aktualisieren und ihre Abhängigkeiten aufzulösen.

Es gibt noch weitere Vorteile der Verwendung von bower, die wir später in diesem Artikel besprechen werden, aber das sind die Hauptprobleme, die bower für uns löst!

Installation und Verwendung

Installation von bower

Bower ist ein Node-Modul und kann mit dem folgenden Befehl installiert werden:

npm install -g bower

Dies installiert bower global auf Ihrem System.

Wenn Sie node nicht auf Ihrem Computer installiert haben, müssen Sie es von nodejs.org.

Installieren von Paketen

Für dieses Tutorial werden wir bower verwenden, um bootstrap zu installieren. Der Prozess funktioniert für jedes andere Paket.

bower install bootstrap

Dies installiert bootstrap in den neu erstellten Ordner /bower_components (auf der Stammebene).

Beachten Sie, dass dies bootstrap 3.2.x installiert, was die neueste Version zum Zeitpunkt der Erstellung dieses Artikels ist. Wenn wir die neueste Version 2.x installieren wollen, müssen wir Folgendes ausführen:

bower install bootstrap#2

Wir können auch die genaue Version mit

bower install bootstrap#2.2

angeben. Da Bootstrap von jQuery abhängt, wird durch die Ausführung eines der vorherigen Befehle automatisch auch jQuery installiert, um die Abhängigkeiten von Bootstrap aufzulösen.

Aktualisieren von Paketen

Wenn wir alle unsere Pakete aktualisieren wollen, müssen wir nur den folgenden Befehl ausführen:

bower update

Einbinden von Skripten

Der letzte Schritt ist das Einbinden der heruntergeladenen Stile und Skripte. Da sie sich alle im Ordner /bower_components befinden, müssen wir folgendes schreiben:

<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css"><script src="bower_components/jquery/dist/jquery.js"></script><script src="bower_components/jquery/dist/js/bootstrap.js"></script>

Gemeinsamer Arbeitsablauf in einer Teamumgebung

Nachdem wir bower auf die oben beschriebene minimalistische Weise verwendet haben, stellen wir fest, dass es neue Probleme bei der Arbeit mit der Versionskontrolle und/oder in einer Teamumgebung aufwirft.

1. Bower lädt nicht nur die Hauptdateien der Distribution herunter, sondern auch das gesamte Repository von Jquery, Bootstrap usw. Dies kann die Versionskontrollhistorie aufblähen und ist absolut nicht empfehlenswert.
2. Auch die Hauptdateien der Distribution (dist/jquery.js, dist/css/bootstrap.css) sind nicht minifiziert, und Bower wird niemals Distributionsdateien minifizieren, da es ein Paketmanager und kein Build-Tool ist.
3. Man muss manuell sicherstellen, dass jquery geladen wird, bevor bootstrap geladen wird (da bootstrap jquery als Abhängigkeit hat).
4. Sie müssen manuell ein neues <script> Tag für jedes neue Paket hinzufügen (und vielleicht ein neues <link rel=“stylesheet“/>, wenn es css-Dateien enthält.

Schritt 1: Installieren Sie bower

und stellen Sie sicher, dass jede Person in Ihrem Team es ebenfalls global installiert.

Schritt 2: Schließen Sie bower_components von der Revisionskontrolle aus

Hängen Sie bower_components an Ihr .gitignore an. Dadurch wird Git angewiesen, die gesamte bower_components-Datei zu ignorieren. Auf diese Weise hat jeder Entwickler (in einem Team) eine lokale Kopie der benötigten Frontend-Bibliotheken. Machen Sie sich keine Sorgen, dass jeder Entwickler eine andere Version hat.

Schritt 3: Installieren Sie die erforderlichen Pakete

Installieren Sie die erforderlichen Front-End-Pakete, sagen wir jQuery und bootstrap.

bower install jquery#1 bootstrap --save

Das --save-Flag weist bower an, eine bower.json-Datei zu erstellen (falls sie nicht existiert) und die installierten Pakete darin einzuschließen. Dies ist ein Beispiel für die erzeugte bower.json-Datei:

{ "name": "package name", "version": "2.9.0", "private": true, "dependencies": { "bootstrap": "~3.2.0", "jquery": "1", }}

Beachten Sie die Versionseinschränkung ~3.2.0. Dies stellt sicher, dass alle Teammitglieder mit der gleichen Version von Bootstrap arbeiten, Tilde bedeutet, dass der Grund einigermaßen nahe am angegebenen Grund liegen sollte.

Schritt 4: Teammitglieder können nun ausführen: bower install

Wenn jeder Entwickler, der Zugriff auf das Repository hat, bower install ausführt, installiert es alle Abhängigkeiten (in diesem Fall Bootstrap und jquery).

Für die verbleibenden Schritte benötigen wir Grunt oder Gulp.

Schritt 5: Integration mit Build-Tools

Grunt und Gulp sind Build-Tools, die dazu dienen, häufige und wiederkehrende Aufgaben zu automatisieren, wie z.B. das Mining von Skripten, das Optimieren von Bildern, das Mining von Stylesheets, das Kompilieren von less/sass/stylus. Bower arbeitet gut mit Grunt/Gulp zusammen, da es bereits fertige Plugins gibt. In diesem Tutorial werde ich Grunt behandeln, aber Sie werden eine ähnliche Alternative für Gulp finden.

Grunt hat ein Plugin namens grunt-bower-concat, das alle Hauptdateien für jede Bower-Komponente, die Sie haben, in eine bower.js Datei kompiliert. Diese können Sie dann mit Grunt minifizieren (uglify), was zu einer bower.min.js.

Grunt bower concat Beispielkonfiguration:

bower_concat:{ all: { dest: "src/js/vendor/bower.js", destCss: "src/css/vendor/bower.css" }},

Hinweis: Wenn Sie Gulp verwenden, existiert ein ähnliches Plugin unter: https://github.com/ck86/main-bower-files/

Hinweis: Für Ruby on Rails und andere, überprüfen Sie den folgenden Link: http://bower.io/docs/tools/

Schritt 6: Skripte einbinden

Mit den folgenden Skripten binden Sie Ihre Skripte einmal ein und jedes Mal, wenn Sie ein neues Frontend-Paket hinzufügen, wird es automatisch in die entsprechende Datei (bower.css oder bower.js)

<link rel="stylesheet" type="text/css" ref="src/css/vendor/bower.css"><script src="src/js/vendor/bower.js"></script>

Schritt 7: Mehr bower-Automatisierung

Sie können bower weiter automatisieren. Nehmen wir an, Sie arbeiten in einem Team und fügen eine neue Bower-Komponente (bower install typeahead.js) hinzu. Sie wollen nicht jedem eine E-Mail schicken, in der Sie ihm sagen, dass er bower install ausführen soll. Wir können das mit grunt-watch und grunt-exec automatisieren:

watch: { less: { files: , tasks: },},exec: { bower_install: { cmd: "bower install" }}

Was hier passiert, ist, dass Grunt jedes Mal, wenn du die Datei bower.json bearbeitest, automatisch den Befehl bower install ausführt. Wenn Sie Ihre Änderungen übertragen und Ihr Kollege Ihren Code zieht, erkennt grunt-watch eine Änderung in bower.json, die dann automatisch den Befehl bower install ausführt.

Wie ich bower in meinem eigenen Arbeitsablauf anpasse

Wenn es um Paketmanager geht, verwende ich viele von ihnen in meinem Arbeitsablauf. Ich verwende npm, um Grunt und seine Plugins zu verwalten. Composer, um meine PHP-Anbieterbibliotheken zu verwalten, bower, um meine Front-End-Pakete zu verwalten und schließlich ruby gems, um Capistrano zu verwalten (ein Paket, das zur Automatisierung von Implementierungen verwendet wird).

Ich habe beschlossen, dass ich npm als main Paketmanager einsetzen möchte. Also begann ich, alle wichtigen Befehle in den package.jsonSkriptabschnitt zu packen. Zum Beispiel:

• npm run migrate: migriert die Datenbank und erzeugt Migrationsdateien (PHP-spezifisch)
• npm test: führt Unit-Tests aus
• npm run protractor: führt End-2-End-Tests aus
• npm run deploy-staging: Deployment des Codes auf Staging-Maschinen
• npm run deploy-production: Deployment des Codes auf Produktionsmaschinen
• npm start: Läuft npm install (vor dem Start), bower update (nach der Installation) und schließlich grunt

Hier sehen Sie, was hinter den Kulissen passiert. Betrachten Sie die folgende package.json-Datei:

{ "name": "test project", "version": "2.9.0", "private": true, "devDependencies": { "bower": "^1.3.9", "grunt-bower-concat": "^0.4.0", "grunt-contrib-uglify": "^0.5.1", "grunt-contrib-watch": "^0.6.1", "grunt-exec": "^0.4.6", }, "scripts": { "prestart": "npm install", "postinstall": "bower update --unsafe-perm", "start": "grunt" }}

Wenn Sie sich den Abschnitt Skripte ansehen, werden Sie sehen, dass prestart: wir npm install ausführen. Da die package.json in unserem Repository enthalten ist, müssen wir, wenn jemand eine neue devDependency hinzufügt, in der Lage sein, die gleiche Version einfach zu installieren. (Beachten Sie, dass pre start der erste Befehl ist, der ausgelöst wird, wenn Sie npm start ausführen).

post install (der durch npm install ausgelöst wird), führt den folgenden Befehl aus: bower update --unsafe-perm (das --unsafe-perm wurde nur hinzugefügt, weil bower-update auf einem Mac fehlgeschlagen ist). Dadurch werden alle unsere Front-End-Pakete auf dem neuesten Stand gehalten.

start:und schließlich wird der Befehl start grunt ausgeführt.

Wenn ein Entwickler aus Ihrem Team mit der Arbeit an dem Projekt beginnen möchte, navigiert er einfach zum Projektverzeichnis und führt npm start aus, um sofort mit der Arbeit zu beginnen.

Dieser Ansatz ist sehr effektiv, weil Sie andere Skripte einbinden können, die von npm ausgeführt werden, wie npm run migrate, npm run deploy-staging usw.

Mit diesem Ansatz fördern wir nicht nur die Verwendung der Befehlszeile und die Automatisierung, sondern wir machen sie sogar einheitlich.

Sie können sehen, dass wir npm install mit bower update verbunden haben. Sie können noch einen Schritt weiter gehen und alle Ihre anderen Paketmanager mit npm install binden. In diesem Fall würde das Ausführen von npm install alle folgenden Befehle ausführen:

• bower update
• composer update --no-dev
• gem update

Zusammenfassend

Bower ist ein erstaunliches Werkzeug, das grundlegende Probleme mit modernen Webanwendungen löst. Alle Leute sollten es benutzen (und sogar das neue Visual Studio wird heutzutage mit Bower und Grunt/Gulp ausgeliefert).

Es kann leicht eingerichtet werden, wenn man alleine entwickelt, aber wenn man in einem Team arbeitet, muss man die in diesem Artikel vorgestellten Schritte befolgen, um einen reibungslosen Arbeitsablauf zwischen allen Entwicklern im Team zu gewährleisten.