TOC

Verwalten von Front-End-JavaScript- und CSS-Abhängigkeiten mit Bower unter Ubuntu 14.04

Einführung

Vorbei sind die Zeiten, in denen wir manuell nach Installationsverzeichnissen für unsere Front-End-Frameworks, Bibliotheken und Assets suchen, diese herunterladen, entpacken und herausfinden mussten.

Bower ist ein Paketmanager für Front-End-Module, die normalerweise aus JavaScript und / oder CSS bestehen. Auf diese Weise können wir diese Front-End-Abhängigkeiten einfach suchen, installieren, aktualisieren oder entfernen.

Der Vorteil von Bower ist, dass Sie externe Abhängigkeiten nicht mit Ihrem Projekt bündeln müssen, wenn Sie es verteilen. Bower kümmert sich um den Code von Drittanbietern, wenn Sie + bower install ausführen und diese Abhängigkeiten an die richtigen Stellen bringen. Dies verkleinert auch das endgültige Projektpaket für die Verteilung.

Bild: https://assets.digitalocean.com/articles/bower/zlrTjni.png [Bower-Logo]

In diesem Tutorial erfahren Sie, wie Sie Bower auf einem Ubuntu 14.04-Server installieren und verwenden. Wir werden Bower verwenden, um Bootstrap und AngularJS zu installieren und ihnen das Ausführen einer einfachen Anwendung auf einem Nginx-Webserver zu veranschaulichen.

Voraussetzungen

Bevor wir beginnen, müssen Sie einige wichtige Schritte ausführen:

Außerdem benötigt Bower * Git *, * Node.js * und * npm *.

  • Installieren Sie Git mit dem folgenden Befehl auf Ihrem Server:

 sudo apt-get install git

Wenn Sie ein ausführlicheres Tutorial zum Einrichten von Git benötigen, besuchen Sie https://www.digitalocean.com/community/tutorials/how-to-install-git-on-ubuntu-14-04 [ So installieren Sie Git unter Ubuntu 14.04].

  • Installieren Sie Node.js mit dem folgenden Befehl auf Ihrem Server:

 sudo apt-get install nodejs

Wenn Sie ein ausführlicheres Tutorial zum Einrichten von Node.js benötigen, besuchen Sie https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-an- ubuntu-14-04-server [So installieren Sie Node.js auf einem Ubuntu 14.04-Server].

  • Installieren Sie npm mit dem folgenden Befehl auf Ihrem Server:

 sudo apt-get install npm

Wenn Sie ein ausführlicheres Tutorial zum Einrichten von npm benötigen, besuchen Sie https://www.digitalocean.com/community/tutorials/how-to-use-npm-to-manage-node-js- packages-on-a-linux-server [Verwendung von npm zum Verwalten von Node.js-Paketen auf einem Linux-Server].

  • Da wir Node.js von einem Paketmanager installiert haben, kann Ihre Binärdatei * nodejs * anstelle von * node * heißen. Da npm davon abhängt, dass Ihre Node.js-Binärdatei * node * heißt, müssen Sie sie nur wie folgt symlinken:

 sudo ln -s /usr/bin/nodejs /usr/bin/node

Weitere Informationen zu diesem Problem finden Sie unter Github. Weitere Informationen zum Symlinking finden Sie unter http://unix.stackexchange.com/questions/68368/. was-ist-symlinking-und-wie-kann-ich-lernen-wie-zu-tun-das [diese StackExchange-Frage].

Wenn Sie mit diesen Schritten fertig sind, können Sie mit dieser Anleitung fortfahren.

Schritt 1 - Bower installieren

Installiere Bower mit npm:

sudo npm install bower -g

Der Schalter * -g * wird verwendet, um Bower global auf Ihrem System zu installieren.

Nachdem wir Bower installiert haben, werden wir mit einem praktischen Beispiel fortfahren. In den nächsten Schritten werden wir

  • Erstellen Sie ein neues Bower-Projekt

  • Installieren Sie Bootstrap mit Bower

  • Installieren Sie AngularJS mit Bower

  • Servieren Sie die Website über Nginx

Am Ende dieses Tutorials finden Sie im Abschnitt * Bower-Referenz * weitere Informationen zu den einzelnen Bower-Optionen.

Schritt 2 - Projektverzeichnis vorbereiten

Wir erstellen unser Bower-Projekt im Verzeichnis "+ / usr / share / nginx / html +", damit wir einfach als Website auf unsere Anwendung zugreifen können. Dies ist das Standard-Dokumentenstammverzeichnis von Nginx.

Also müssen wir mit dem Befehl + cd + in dieses Verzeichnis wechseln:

cd /usr/share/nginx/html

In Nginx unter Ubuntu 14.04 ist standardmäßig ein Serverblock aktiviert. Es ist so konfiguriert, dass Dokumente aus dem oben genannten Verzeichnis "+ / usr / share / nginx / html +" bereitgestellt werden.

In unserem Beispiel wird die Standardwebsite verwendet.

Für eine Produktionsanwendung sollten Sie jedoch wahrscheinlich https://www.digitalocean.com/community/tutorials/how-to-set-up-nginx-server-blocks-virtual-hosts-on-ubuntu-14-04- Es [richtet einen Serverblock ein] für Ihre spezifische Domain.

Bevor wir im Verzeichnis "+ / usr / share / nginx / html" arbeiten können, müssen wir unseren sudo-Benutzern die entsprechenden Rechte erteilen.

Ändern Sie den Besitz des Verzeichnisses mit dem folgenden Befehl:

sudo chown -R : /usr/share/nginx/html/

Anstelle von * sammy * würden Sie Ihren eigenen sudo-Benutzer verwenden, den Sie unter der Voraussetzung Ubuntu 14.04 Initial Server erstellt haben Setup Tutorial.

Schritt 3 - Initialisieren des Bower-Projekts

Führen Sie nun im Verzeichnis "+ / usr / share / nginx / html +" den folgenden Befehl aus, um ein neues Bower-Projekt zu erstellen:

bower init

Sie werden eine Reihe von Fragen gestellt. Für dieses schnelle Beispielprojekt können Sie einfach "+ ENTER +" drücken, um alle Standardeinstellungen auszuwählen.

Eine detaillierte Aufschlüsselung der Antworten finden Sie unten, markiert in:

Interactive? May bower anonymously report usage statistics to improve the tool over time?
? name:
? version:
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors:
? license:
? homepage:
? set currently installed components as dependencies?
? add commonly ignored files to ignore list?
? would you like to mark this package as private which prevents it from being accidentally published to the registry?

{
 name: 'BowerTest',
 version: '0.0.0',
 description: 'Testing Bower',
 main: 'index.html',
 keywords: [
   'bower',
   'angular',
   'bootstrap'
 ],
 authors: [
   'Nikola Brežnjak'
 ],
 license: 'MIT',
 homepage: 'http://bower.example.com',
 ignore: [
   '**/.*',
   'node_modules',
   'bower_components',
   'test',
   'tests'
 ]
}

? Looks good?

Einige Anmerkungen zu diesen Optionen:

  • Um die vorherige Notiz noch einmal zu lesen, müssen Sie keine der Optionen eingeben, wenn Sie den Befehl "+ bower init +" für dieses Beispielprojekt ausführen

  • In der Frage "+ Welche Modultypen enthält dieses Paket? " Können Sie die Optionen durch Drücken von " LEERTASTE " auswählen oder deren Auswahl aufheben. Durch Drücken von ` ENTER +` wird die Auswahl bestätigt. Standardmäßig ist keine ausgewählt. Für dieses einfache Beispiel benötigen wir keine. Weitere Informationen finden Sie unter offizielle GitHub-Ausgabe.

  • Für ein Produktionsprojekt möchten Sie das Feld "+ Autoren +" und andere Einstellungen ausfüllen, damit andere Personen mehr über das Projekt erfahren

  • Die Einstellung "+ homepage +" wird nur zum Anzeigen Ihrer eigenen Website verwendet und hat nichts mit den Einstellungen des Servers zu tun, auf dem Sie diese Anwendung ausführen

Jetzt sollten Sie eine + bower.json -Datei in Ihrem Arbeitsverzeichnis (` + / usr / share / nginx / html / + `) haben, deren JSON-Inhalt in der obigen Ausgabe angezeigt wird.

Schritt 4 - Installieren von AngularJS

AngularJS ist ein JavaScript-Framework für Webanwendungen. Führen Sie den folgenden Befehl aus, um AngularJS mit Bower zu installieren:

bower install angularjs --save

Sie können die Ausgabe des Befehls unten sehen:

Output                                                bower angularjs#*               cached git://github.com/angular/bower-angular.git#1.3.14
bower angularjs#*             validate 1.3.14 against git://github.com/angular/bower-angular.git#*
bower angularjs#*                  new version for git://github.com/angular/bower-angular.git#*
bower angularjs#*              resolve git://github.com/angular/bower-angular.git#*
bower angularjs#*             download https://github.com/angular/bower-angular/archive/v1.4.3.tar.gz
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 20%
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 24%
bower angularjs#*             progress received 0.5MB of 0.5MB downloaded, 98%
bower angularjs#*              extract archive.tar.gz
bower angularjs#*             resolved git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3         install angularjs#1.4.3

angularjs#1.4.3 bower_components/angularjs

Wenn Sie eine etwas andere Ausgabe als die oben gezeigte erhalten, kann dies an der Tatsache liegen, dass Bower Pakete für einen schnelleren Download zwischenspeichert und Ihr Paket aus dem Cache installiert wurde.

Wir haben jetzt AngularJS im Verzeichnis "+ bower_components / angular " (oder möglicherweise im Verzeichnis " bower_components / angularjs ") installiert, wobei der Pfad zur verkleinerten Version (die wir verwenden werden) lautet: " bower_components / angular / angular" .min.js + `.

Schritt 5 - Bootstrap installieren

Bootstrap ist ein CSS-Framework. Führen Sie den folgenden Befehl aus, um Bootstrap mit Bower zu installieren:

bower install bootstrap --save

Sie können die Ausgabe des Befehls unten sehen:

Outputbower angularjs#~1.4.3          cached git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3        validate 1.4.3 against git://github.com/angular/bower-angular.git#~1.4.3
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.3.5
bower bootstrap#*             validate 3.3.5 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.1           cached git://github.com/jquery/jquery.git#2.1.4
bower jquery#>= 1.9.1         validate 2.1.4 against git://github.com/jquery/jquery.git#>= 1.9.1
bower angularjs#~1.4.3         install angularjs#1.4.3
bower bootstrap#~3.3.5         install bootstrap#3.3.5
bower jquery#>= 1.9.1          install jquery#2.1.4

angularjs#1.4.3 js/angularjs

bootstrap#3.3.5 js/bootstrap
└── jquery#2.1.4

jquery#2.1.4 js/jquery

Wir haben jetzt Bootstrap im Verzeichnis + bower_components / bootstrap + installiert. Der Pfad zu der verkleinerten Version (die wir verwenden werden) lautet: + bower_components / bootstrap / dist / js / bootstrap.min.js + für die JavaScript-Datei und + bower_components / bootstrap / dist / css / bootstrap.min.css + für die CSS-Datei.

Beachten Sie, dass auch jQuery installiert wurde, da dies eine von Bootstrap geforderte Abhängigkeit ist.

Schritt 6 - Erstellen einer Hello World-Anwendung

Ersetzen Sie im Ordner "+ / usr / share / nginx / html / " die Standarddatei " index.html +" durch unseren eigenen Inhalt:

mv /usr/share/nginx/html/index.html /usr/share/nginx/html/index.html.orig

Öffnen Sie die Datei zum Bearbeiten:

vim /usr/share/nginx/html/index.html

Sie können diesen Inhalt genau eingeben:

/usr/share/nginx/html/index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <title>Bootstrap 101 Template</title>

   <!-- Bootstrap -->
   <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
   <div class="container" ng-app>
       <form class="form-signin">
           <h2 class="form-signin-heading">What you type here:</h2>

           <input ng-model="data.input" type="text" class="form-control" autofocus>

           <h2 class="form-signin-heading">It will also be shown below:</h2>
           <input type="text" class="sr-only">{{data.input}}</label>
       </form>
   </div>

   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

   <script src="bower_components/angular/angular.min.js"></script>
</body>
</html>

Jetzt haben wir eine einfache Beispielanwendung vom Typ Hello World, die Bootstrap mit AngularJS unter Nginx verwendet.

(Dies ist im Grunde genommen das Beispiel Signin Template from Bootstrap, bei dem der Inhalt des Tags + <body> + eine einfache Form mit zwei Eingabefeldern hat.)

Um diese Beispiel-App anzuzeigen, müssen Sie in Ihrem Browser zur IP Ihres Droplets navigieren. so etwas wie "+ http: // +". Sie sollten so etwas wie das Bild unten sehen:

image: https://assets.digitalocean.com/articles/bower/O3wFyJW.png [Was Sie hier eingeben: Es wird auch unten angezeigt:]

Wenn Sie etwas in das Textfeld eingeben, wird unter Verwendung der bidirektionalen Datenbindung AngularJS genau derselbe Inhalt angezeigt.

Wenn Sie keine Ausgabe erhalten, starten Sie Nginx mit dem folgenden Befehl neu:

sudo service nginx restart

Wenn Sie mehr über AngularJS erfahren möchten, besuchen Sie die offizielle Dokumentation unter https://docs.angularjs.org/tutorial. Wenn Sie mehr über Bootstrap erfahren möchten, besuchen Sie die offizielle Dokumentation unter http://getbootstrap.com/getting-started/.

Wenn Sie über einen Domain-Namen auf Ihren Webserver zugreifen möchten, erwerben Sie anstelle der öffentlichen IP-Adresse einen Domain-Namen, und befolgen Sie diese Anleitungen:

Bower Referenz

Nachdem wir ein praktisches Beispiel für Bower durchgearbeitet haben, wollen wir uns einige seiner allgemeinen Funktionen ansehen.

Pakete installieren

Um ein Paket zu installieren (zum Beispiel AngularJS oder Bootstrap), müssten wir den folgenden Befehl ausführen:

bower install

Geben Sie anstelle von "++" den genauen Namen des Pakets ein, das Sie installieren möchten. Das Paket kann eine GitHub-Kurzform, ein Git-Endpunkt, eine URL und vieles mehr sein.

Sie können auch eine bestimmte Version eines bestimmten Pakets installieren.

Erfahren Sie mehr über alle verfügbaren Optionen für die Installation über die offizielle Dokumentation zur Installation von Bower.

Pakete suchen

Sie können nach Paketen über dieses online tool oder mithilfe der Bower-CLI suchen. Verwenden Sie den folgenden Befehl, um mit der Bower-CLI nach Paketen zu suchen:

bower search

Wenn wir beispielsweise AngularJS installieren möchten, uns aber nicht sicher sind, wie das Paket heißt, oder alle verfügbaren Pakete für AngularJS anzeigen möchten, können Sie den folgenden Befehl ausführen:

bower search angularjs

Wir würden eine Ausgabe ähnlich der folgenden erhalten:

OutputSearch results:
   angularjs-nvd3-directives git://github.com/cmaurer/angularjs-nvd3-directives.git
   AngularJS-Toaster git://github.com/jirikavi/AngularJS-Toaster.git
   angularjs git://github.com/angular/bower-angular.git
   angular-facebook git://github.com/Ciul/Angularjs-Facebook.git
   angularjs-file-upload git://github.com/danialfarid/angular-file-upload-bower.git
   angularjs-rails-resource git://github.com/FineLinePrototyping/dist-angularjs-rails-resource
   angularjs-geolocation git://github.com/arunisrael/angularjs-geolocation.git

Um AngularJS zu installieren, führen Sie einfach den folgenden Befehl aus:

bower install angularjs

Pakete speichern

Wenn Sie ein Projekt mit Bower starten, müssen Sie standardmäßig den Befehl "+ init +" ausführen:

bower init

Dies führt Sie durch die Erstellung einer "+ bower.json" -Datei, die Bower für die Projektkonfiguration verwendet. Der Prozess könnte folgendermaßen aussehen:

Output? name: howto-bower
? version: 0.0.0
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors: Nikola Breznjak <[email protected]>
? license: MIT
? homepage: https://github.com/Hitman666/jsRockstar
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
 name: 'howto-bower',
 version: '0.0.0',
 homepage: 'https://github.com/Hitman666/jsRockstar',
 authors: [
   'Nikola Breznjak <[email protected]>'
 ],
 license: 'MIT',
 ignore: [
   '**/.*',
   'node_modules',
   'bower_components',
   'test',
   'tests'
 ]
}

? Looks good? Yes

Wenn Sie nun eines der Pakete mit dem Schalter "+ - save" installieren, werden diese in der Datei "+ bower.json" im Objekt "dependencies" gespeichert. Wenn wir beispielsweise AngularJS mit dem folgenden Befehl installiert haben:

bower install angularjs --save

Dann würde unsere + bower.json-Datei ungefähr so ​​aussehen (beachte das * dependencies * -Objekt):

bower.json

{
 "name": "howto-bower",
 "version": "0.0.0",
 "homepage": "https://github.com/Hitman666/jsRockstar",
 "authors": [
   "Nikola Breznjak <[email protected]>"
 ],
 "license": "MIT",
 "ignore": [
   "**/.*",
   "node_modules",
   "bower_components",
   "test",
   "tests"
 ],



}

Pakete deinstallieren

Führen Sie einfach den folgenden Befehl aus, um ein Bower-Paket zu deinstallieren:

bower uninstall

Dadurch wird ein Paket aus Ihrem Verzeichnis "+ bower_component " (oder einem anderen Verzeichnis, das Sie in der Datei " .bowerrc +" definiert haben) deinstalliert (mehr zur Konfiguration im nächsten Abschnitt).

Konfigurieren von Bower mit .bowerrc

Um Bower zu konfigurieren, müssen Sie eine Datei mit dem Namen "+ .bowerrc +" erstellen. (Beachten Sie den Punkt - dies bedeutet, dass es sich um eine versteckte Datei in einer Linux-Umgebung handelt.)

Erstellen Sie die Datei "+ .bowerrc" im Stammverzeichnis Ihres Projekts (neben der Datei "+ bower.json"). Sie können eine "+ .bowerrc +" - Datei pro Projekt mit unterschiedlichen Einstellungen erstellen.

Mit Bower können Sie viele Optionen mithilfe dieser Datei konfigurieren. Weitere Informationen finden Sie in den configuration options der offiziellen Dokumentation.

Eine nützliche Option ist die Option "+ Verzeichnis +", mit der Sie den Ordner anpassen können, in dem Bower alle seine Pakete speichert.

Um diese einfache Option festzulegen, erstellen Sie eine + .bowerrc + Datei, die so aussieht:

bowerrc
{
 "directory": ""
}

Fazit

Nach Abschluss dieses Lernprogramms sollten Sie wissen, wie Sie mit Bower die Abhängigkeiten für eine einfache AngularJS-Anwendung installieren.

Sie sollten auch eine Vorstellung davon haben, wie Sie Bower für Ihre eigenen benutzerdefinierten Anwendungen verwenden können.

Related