Anfängerleitfaden: Erste Schritte mit Bower Package Manager


Laube ist ein Front-End-Paketmanager, der von Twitter entwickelt wurde. 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 erweiterte Verwendung für eine Teamumgebung. Ich werde auch meinen persönlichen Arbeitsablauf beim Umgang mit Bower mit einem Team von Entwicklern teilen.

Probleme, die Bower löst

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

  1. Das Herunterladen jedes dieser Pakete erfordert das Navigieren auf der entsprechenden Website, das Finden der entsprechenden Version, das Herunterladen, das Entpacken und schließlich das Verschieben der Hauptdateien in den Herstellerordner. (zB: die main Datei im jquery-Paket ist jquery.js)
  2. Nachdem Sie die Dateien in Ihr Repository heruntergeladen haben, müssen Sie alle oben genannten Websites (jquery.com, anglejs.com, bootstrap.com) manuell besuchen, um nach Updates zu suchen, und wissen Sie was? Wenn es ein Update gibt, müssen Sie Schritt 1 für jedes Paket/Update wiederholen.
  3. Nehmen wir an, wir verwenden Bootstrap, das jQuery (Abhängigkeit genannt) erfordert. Wenn du gehst getbootstrap.com Um es herunterzuladen, müssen Sie dann zu navigieren jquery.com um auch jquery herunterzuladen.

Zusammenfassend hilft Ihnen Bower bei der Verwaltung Ihrer Front-End-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 dies sind die Hauptprobleme, die Bower für uns löst!

Installation und Verwendung

Laube installieren

Bower ist ein Knotenmodul und kann mit dem folgenden Befehl installiert werden:

npm install -g bower

Dadurch wird Bower global auf Ihrem System installiert.

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

Pakete installieren

Für dieses Tutorial verwenden wir Bower, um Bootstrap zu installieren. Der Prozess funktioniert für jedes andere Paket.

bower install bootstrap

Dadurch wird Bootstrap in der neu erstellten Datei installiert /bower_components Ordner (auf der Stammebene).

Beachten Sie, dass dies Bootstrap 3.2.x installieren wird, was die neueste Version zum Zeitpunkt des Schreibens dieses Artikels ist. Wenn wir die neueste Version in 2.x installieren möchten, müssen wir Folgendes ausführen:

bower install bootstrap#2

Wir können auch die genaue Version mit angeben

bower install bootstrap#2.2

Beachten Sie auch, dass, da Bootstrap von jQuery abhängt, das Ausführen 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 möchten, müssen wir nur den folgenden Befehl ausführen:

bower update

Einschließlich Skripte

Der letzte Schritt wäre, die heruntergeladenen Stile und Skripte einzubinden. Da sie sich alle im Inneren befinden /bower_components Ordner 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 Workflow in einer Teamumgebung

Nachdem wir Bower auf die obige minimalistische Weise verwendet haben, stellen wir fest, dass es neue Probleme bei der Arbeit mit der Quellcodeverwaltung und/oder in einer Teamumgebung aufwirft.

  1. Bower lädt nicht nur die wichtigsten Distributionsdateien herunter, sondern auch das gesamte Repository von jquery, Bootstrap usw. Dies kann Ihren Revisionskontrollverlauf aufblähen und wird absolut nicht empfohlen.
  2. Auch Hauptverteilungsdateien (dist/jquery.js, dist/css/bootstrap.css) werden nicht minimiert, und Bower wird niemals Verteilungsdateien minimieren, da es ein Paketmanager und kein Build-Tool ist.
  3. Sie müssen manuell sicherstellen, dass jquery vor dem Laden von Bootstrap geladen wird (weil Bootstrap jquery als Abhängigkeit hat).
  4. Sie müssen für jedes neue Paket manuell ein neues