Artikel
10/09/2015

Oktober 2015

Band 30, Nummer 10

Visual Studio – Bower: Moderne Tools für die Webentwicklung

Von Adam Tuliper | Oktober 2015

Sehr lange Zeit haben wir in einem schönen ummauerten Garten gelebt. In diesem geschützten "Ökosystem" der Webentwicklung haben wir mit hoch entwickelter Technologie wie ASP.NET und Visual Studio gearbeitet. Die Tools der restlichen Welt haben wir als unterlegen betrachtet. Wir waren Teil eines Imperiums, und wenn Sie so wollen, war das lange Zeit nicht das Schlechteste.

Doch mit der Zeit wurden Entwicklungskulturen, Tools, Ressourcen und andere Dinge immer zersplitterter und chaotischer. Nicht zu leugnen ist, dass sich aber auch einige solide Technologien und Tools in dieser Zeit entwickelt haben, z. B. Bootstrap, AngularJS, Git, jQuery, Grunt, Gulp und Bower, die an das Microsoft-Ökosystem gewohnte Webentwickler durchaus nutzen können.

Im ersten Teil dieser aus zwei Artikeln bestehenden Reihe gebe ich Ihnen einen Überblick über Bower, einen Paket-Manager, der sich besonders (aber nicht nur) für die Front-End-Webentwicklung eignet. Im zweiten Artikel beschäftige ich mich mit Grunt und Gulp, zwei JavaScript Task Runner-Tools, mit denen alle möglichen Aufgaben wie Kopieren von Dateien, Minimierung, Verkettung und sogar Kompilierung ausgeführt werden können.

Grunt, Gulp und Bower sind Ergänzungen Ihrer Toolpalette für die Webentwicklung. Möglichkeiten zur Integration mit diesen Tools sind in Visual Studio 2015 gegeben und in Visual Studio 2012 und 2013 über Add-Ins verfügbar. Sie müssen sie nur noch installieren.

Einige von Ihnen sich fragen sich bestimmt, ob Microsoft verlangt, noch mehr Tools zu erlernen und einzusetzen. Eignet sich NuGet nicht wirklich gut für Pakete, und reicht MSBUILD als Buildtool nicht aus? Die Antwort auf beide Fragen ist ja – in vielen, aber nicht in allen Fällen. Und in den Fällen, in denen herkömmliche Tools nicht ausreichen, können Grunt, Gulp und Bower helfen. In einem Webprojekt möchten Sie Ihre SASS ggf. kompilieren, wenn sich eine CSS-Datei ändert. Oder Sie möchten mit der neuesten Version von Bootstrap oder Angular arbeiten, ohne darauf zu warten, dass jemand bei Microsoft ein entsprechendes NuGet-Paket erstellt. Beide Aufgaben lassen sich nicht mit NuGet oder MSBUILD erledigen.

NuGet ist eine beeindruckende Technologie, die weiter entwickelt, unterstützt und umfassend in Visual Studio integriert wird. Nutzen Sie sie weiterhin für Ihre Projekte, insbesondere für Binärdateien und Projekte, die Änderungen an Ihren Visual Studio-Projektmappen vornehmen müssen. Immer wenn eine neue Version von jQuery oder Bootstrap erscheint, muss allerdings jemand ein entsprechendes NuGet-Paket erstellen und veröffentlichen. Da aber Bower mit einer semantischen Versionsverwaltung arbeitet, kann Bower ein Tool verwenden, sobald es auf GitHub veröffentlicht und mit Tags versehen wurde. Sie müssen also nicht mehr warten, bis jemand ein entsprechendes NuGet-Paket erstellt.

Im nächsten Artikel verwende ich den Node Package Manager (NPM) für die Installation von Bower und mehrerer Elemente. Da NPM nicht als eigenständiger Download angeboten wird, müssen Sie Node.js von nodejs.org herunterladen und installieren. Weitere Informationen zum Installieren und Verwenden von NPM finden Sie auf der Microsoft Virtual Academy-Seite "Package Management and Workflow Automation" unter bit.ly/1EjRWMx.

Bower ist ein leistungsfähiger Paket-Manager, der zumeist für die Front-End-Webentwicklung genutzt wird, und wohl die einzige auf das Front-End beschränkte Paket-Manager-Lösung. Die meisten bei der Front-End-Webentwicklung verwendeten Pakete, wie z. B. Bootstrap, jQuery und AngularJS, können entweder mit NPM oder Bower installiert werden. Doch in den meisten Fällen ist die Verwaltung von Abhängigkeiten mit Bower ein wenig einfacher (wenngleich dem nicht alle zustimmen).

Bower-Pakete sind im Gegensatz zu NuGet-Paketen nicht auf einen einzelnen Quelltyp begrenzt. Ein Bower-Paket kann u. a. ein Git-Endpunkt, ein Ordner in einem Dateisystem oder eine URL für Inhalts- oder ZIP-Dateien sein. Bower ist in eine Paketregistrierung integriert, in der veröffentlichte Pakete aufgelistet werden. Doch Pakete müssen nicht in Bower aufgelistet sein, um installiert zu werden.

Installieren und Verwenden von Bower

Bower ruft Daten zumeist aus einem Git-Repository ab, weshalb Sie MSysGit (msysgit.github.io) installieren und die Option für die Ausführung an der Eingabeaufforderung auswählen müssen (siehe Abbildung 1).

Abbildung 1: Installieren von MSysGit mit Befehlszeilenunterstützung

Mithilfe von NPM können Sie Bower global installieren, sodass Sie das Tool überall in Ihrem System nutzen können. Sie müssen Bower nur einmal, d. h. nicht projektbezogen, installieren.

npm install -g bower

Nun können Sie mit der Nutzung von Bower beginnen. Öffnen Sie eine Befehlszeile am Stammverzeichnis Ihres Projektordners, und wählen Sie das folgende Format zum Installieren eines Pakets in Ihr Projekt:

bower install <package name/url/zip/etc.> --save

Um z. B. jQuery zu installieren, geben Sie Folgendes ein:

bower install jquery --save

Die ersten drei Worte ergeben wahrscheinlich einen Sinn, doch "--save" bedarf vielleicht einer Erläuterung. Dieser Parameter bewirkt das Schreiben eines Eintrags in die Datei "bower.json" als Hinweis, dass Sie dieses Paket installiert haben. (Bower erstellt diese Datei nicht standardmäßig. Sie müssen das Tool dazu auffordern, was ich in Kürze erörtern werde.) Standardmäßig erstellt der Bower-Befehl "install" den Ordner "bower_components" im Ordner, in dem Sie den Befehl "install" ausgeführt haben. Der Ordnername "bower_components" kann in der Bower-Konfigurationsdatei ".bowerrc" angepasst werden.

Wie Sie in Abbildung 2 sehen, führt die Installation des jQuery-Pakets zu einer Installation von wesentlich mehr Dateien und Ordnern, als Sie ggf. erwarten. Für mein Projekt brauche ich eigentlich nur die Datei "jQuery.js", doch in diesem Fall erhalte ich die gesamte Quellcodestruktur von jQuery. Bei vielen Paketinstallationen erhalten Sie in der Tat die gesamte Quellcodestruktur, also wesentlich mehr, als Sie benötigen. Neue Benutzer von Bower fragen sich dann, welche Datei wohl verwendet werden soll.

Abbildung 2: Bower installiert die gesamte Quellcodestruktur von jQuery

Bei einigen Projekten wird eine Paketversion der App ohne die Zusatzdateien freigegeben, die Sie nicht wollen. Das Bower-Paket für AngularJS ist z.B. ein Repository im Angular-Stammverzeichnis auf GitHub unter github.com/angular/bower-angular. Wenn Sie dieses Paket installieren (bower install angular --save), erhalten Sie nur die JS- und CSS-Dateien, auf die Sie in Ihren HTML-Seiten verweisen müssen.

Um Pakete zu finden, können Sie zu "bower.io" wechseln, Visual Studio IntelliSense verwenden (was weiter unten behandelt wird) oder das Bower-Paketrepository über die Befehlszeile durchsuchen:

bower search jquery

Sie können auch mehrere Pakete gleichzeitig installieren, was sich besonders anbietet, wenn Sie Ihre Installationen skriptgesteuert ausführen möchten:

bower install jquery bootstrap-css angular
#or install a specific version of jquery ui
bower install jquery-ui#1.10.4
#install a github repository as a package
bower install https://github.com/SomeRepository/project.git

Bower erstellt einen lokalen Cache der Pakete, die Sie installieren. Auf Systemen mit Windows 8 und Windows 10 heißt der standardmäßige Cacheordner "C:\Users\<EigenerName>\AppData\Local\bower\cache\packages" (Sie können diese Standardeinstellung in Ihrer Datei ".bowerrc" überschreiben). Wie Abbildung 3 zeigt, können Sie im Cache gespeicherte Pakete über die Befehle "list" und "clean" verwalten. Immer wenn Sie "bower install" ausführen, ruft Bower nach Möglichkeit Daten aus dem lokalen Cache ab.

Abbildung 3: Verwenden des lokalen Bower-Caches

#install jquery package for the first time
bower install jquery
#uninstall jquery package
bower uninstall jquery
#install from cache (ie works disconnected)
bower install jquery --offline
#show me the cache
bower cache list
#clean local cache
bower cache clean
#will fail, package no longer cached
bower install jquery --offline

Bei Paketen, die von anderen Paketen abhängen, versucht Bower, die erforderlichen Abhängigkeiten in Ihrem Dateisystem zu installieren. Bower hat eine flache Abhängigkeitsstruktur, was heißt, dass erforderliche Abhängigkeiten direkt unter "/bower_components" und nicht unter dem Paket installiert werden, die sie benötigen. Beispiel: Die Datei "bower.json" für "jQuery UI" weist eine Abhängigkeit von "jquery": ">=1.6" auf. Dies bedeutet, dass wenn jQuery noch nicht installiert ist, die neueste Version des jQuery-Pakets in "/bower_components" installiert wird, solange es sich mindestens um Version 1.6 handelt.

Das Aktualisieren und Deinstallieren von Paketen erfolgt unkompliziert und sieht Versions- und Abhängigkeitsprüfungen vor:

#will update based on version rules in bower.json, ex. "jquery": "~2.1.3"
#specifies any patch like 2.1.4 is acceptable to update, but 2.2.0 is not
bower update jquery
#will remove folder and reference in bower.json, but will prompt first
#if other packages have a dependency on jquery
bower uninstall jquery

Die Datei "bower.json"

Wenn ich an dieser Stelle den Ordner "/bower_components" gelöscht hätte, wüsste ich nicht, welche Pakete von meiner Anwendung installiert oder benötigt wurden. Wenn ich den Quellcode (ohne Pakete) einem anderen Entwickler geben oder in eine andere Umgebung überführen würde, z. B. auf einen Buildserver ohne den Ordner "/bower_components", hätten dieser Entwickler und ich Pech. Wenn Sie mit NuGet vertraut sind, entspricht dies dem Fehlen der Datei "packages.config". Im Idealfall enthält Ihre Anwendung die Datei "bower.json", damit Bower Ihre Paketabhängigkeiten und -versionen nachverfolgen kann, was aber optional ist.

Führen Sie zum Erstellen der Datei "bower.json" den Befehl "bower init" im Stammverzeichnis Ihres Projekts aus, und befolgen Sie die in Abbildung 4 gezeigten Eingabeaufforderungen.

Abbildung 4: Erstellen der Datei "bower.json"

C:\Users\Adam\Documents\WebApp> bower init
? name: MyWebApp
? version: 1.0.0
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors: Adam Tuliper <adam.tuliper@gmail.com>
? license: MIT
? homepage:
? set currently installed components as dependencies? (Y/n) Y
? 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? (y/N)

Wenn Sie vergessen sollten, die Datei "bower.json" zu erstellen, und verschiedene Pakete ohne sie installieren, oder vergessen sollten, diese Pakete mit der Option "–save" hinzuzufügen, seien Sie unbesorgt. Wenn Sie den Befehl "bower init" ausführen, werden Sie gefragt: "set currently installed components as dependencies?" Falls Sie bejahen, untersucht Bower die Pakete im Ordner "/bower_components" und fügt die ermittelten Stammpakete dem Abschnitt "dependencies" hinzu. Beachten Sie allerdings, dass wenn "jQuery UI" von "jQuery" abhängt, "jQuery" nicht als Abhängigkeit in Ihrer Datei mithilfe dieser Methode hinzugefügt wird, da die Installation erfolgt, wenn Sie "jQuery UI" installieren. Es empfiehlt sich stets, den Abschnitt mit diesen generierten Abhängigkeiten zu prüfen, um sicherzustellen, dass Sie mit den aufzuführenden Abhängigkeiten einverstanden sind.

Nun können Sie Bower für Ihr Projekt an der Befehlszeile initialisieren, in der Regel im Stammordner Ihres Webprojekts. Anschließend installieren Sie Ihre Abhängigkeiten. In Abbildung 5 sehen Sie ein Beispiel der Datei "bower.json".

Abbildung 5: Beispiel der Datei "bower.json"

{
  "name": "MyWebApp",
  "version": "0.0.0",
  "authors": [
    "Adam Tuliper <adam.tuliper@anonymous>"
  ],
  "license": "MIT",
  "ignore": [
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "~1.4.3",
    "bootstrap-css": "~3.3.4",
    "jquery-ui": "~1.11.4"
  },
   "devDependencies": {
    "angular-mocks": "~1.4.3"
  }
}
}

Der oberste Abschnitt enthält allgemeine Projekt- und Paketinformationen. Andere nennenswerte Abschnitte sind "ignore", "dependencies" und "devDependencies". Der Abschnitt "ignore" schließt die angegebenen Dateien aus, sollten Sie ein Bower-Paket aus dieser App erstellen. Da ich mit einer Web-App arbeite und kein eigenes Bower-Paket erstelle, trifft dies nicht zu. Die Abschnitte "dependencies" und "devDependencies" enthalten alle von mir installierten Pakete, die von meiner Anwendung verwendet werden. Diese werde im nächsten Abschnitt detaillierter behandeln.

Verwalten von Abhängigkeiten

Sie haben gesehen, dass Sie in der Datei "bower.json" zwei Arten von Abhängigkeiten angeben können: "dependencies" und "devDependencies". Elemente im Abschnitt "dependencies" werden beispielsweise hinzugefügt, wenn Sie "bower install jquery --save" aufrufen. Dies sind Pakete (wie z. B. jQuery), die in der Produktionsumgebung für Ihre App ausgeführt werden. Die Einträge in "devDependencies" sind hingegen Pakete, die zumeist nicht in die Produktionsumgebung gelangen, wie z. B. Pseudo-Frameworks wie "angular-mocks" oder LESS-/SASS-Compiler. Diese Einträge werden z. B. hinzugefügt, wenn Sie die Option "bower install angular-mocks --save-dev" verwenden. Diese beiden Abhängigkeiten werden nur in Ihrer Datei "bower.json" unterschieden und wirken sich nicht darauf aus, wie Sie diese Dateien im Dateisystem Ihrer Anwendung verwenden. Wenn Sie beispielsweise eine Wiederherstellung der Pakete in einer Qualitätssicherungsumgebung durchführen, müssen Sie theoretisch die Abhängigkeiten in "devDependencies" nicht installieren.

Um nur alle Abhängigkeiten im Abschnitt "dependencies" zu installieren und alles in "devDependencies" zu ignorieren, z. B. beim Erstellen eines Produktionsbuilds, wählen Sie den Befehl "bower install –production".

Wenn Sie alle Abhängigkeiten anzeigen möchten, die Ihre Anwendung verwendet, können Sie "bower list" ausführen. Dieser Befehl hat eine Ausgabe wie die folgende:

bower check-new     Checking for new versions of the project dependencies..
MyWebApp#0.0.0 C:\Users\Adam\Documents\MyWebApp
├── angular#1.4.3 (1.4.4-build.4147+sha.bb281f8 available)
├─┬ angular-mocks#1.4.3 (1.4.4-build.4147+sha.bb281f8 available)
│ └── angular#1.4.3 (latest is 1.4.4-build.4147+sha.bb281f8)
├── bootstrap-css#3.3.4
├─┬ jquery-ui#1.11.4
│ └── jquery#2.1.4 (3.0.0-alpha1+compat available)
└── jquery1#2.1.4 (3.0.0-alpha1+compat available)

Zu viele Dateien

Neue Benutzer von Bower merken rasch, dass einige Pakete viele Dateien enthalten, während sie eigentlich nur eine brauchen. Bei einigen Bower-Paketen werden eine oder mehrere Dateien im Konfigurationsabschnitt "main" aufgeführt, die für die Nutzung des Pakets erforderlich sind. Das Paket von jQuery enthält ca. 90 Dateien, wenn Sie es installieren. Doch zum Verwenden von jQuery brauchen Sie nur "jQuery.js". Die Lösung ist, sich "main" genauer anzusehen, um festzustellen, dass für jQuery nur eine einzige Datei im Ordner "/dist" aufgeführt ist:

{
  "name": "jquery",
  "version": "2.1.4",
  "main": "dist/jquery.js",
...
}

Wenn Sie den Ordner "/dist" für jQuery untersuchen, finden Sie auch die Datei "jQuery.min.js" und die dazugehörige MAP-Datei für das Debugging, wenngleich es sinnvoll wäre, diese Dateien im Element "main" aufzulisten, da beabsichtigt ist, dass entweder "jQuery.js" oder "jQuery.min.js" in der Produktion verwendet wird und nicht beide.

Beim Ausführen von "bower list --paths" werden alle Dateien in "main" für alle installierten Pakete zurückgegeben, wie z. B.:

C:\Users\Adam\Documents\MyWeb> bower list --paths
  angular: 'bower_components/angular/angular.js',
  'bootstrap-css': [
    'bower_components/bootstrap-css/css/bootstrap.min.css',
    'bower_components/bootstrap-css/js/bootstrap.min.js'
  ],
  jquery: 'bower_components/jquery/dist/jquery.js'

Die Autoren von Paketen haben die Pflicht sicherzustellen, dass im Abschnitt "main" die ordnungsgemäßen Dateien aufgeführt sind.

Da sich standardmäßig alle Paketdateien unter dem Unterordner "/bower_components" befinden, könnten Sie glauben, dass meine HTML-Dateien direkt wie folgt aus diesem Ordner auf die Dateien verweisen:

<link rel="stylesheet" type="text/css"
  href="/bower_components/bootstrap-css/css/bootstrap.min.css">
<script src="/bower_components/bootstrap-css/js/bootstrap.min.js" />
<script src="/bower_components/angular/angular.js" />
<script src="/bower_components/jquery/dist/jquery.js" />

Sie können im Internet viele Beispiele finden, die genau das tun und auf Dateien im Ordner "/bower_components" verweisen. Das ist allerdings keine saubere Vorgehensweise. Ich empfehle sie nicht und möchte zum Beispiel keinen solchen Ordner und möglicherweise Hunderte oder Tausende von Dateien in der Produktion bereitstellen, wenn ich nur eine Handvoll Dateien brauche, die eigentlich zu noch weniger Dateien minimiert und verkettet werden sollten. Die entsprechenden Techniken werde ich im nächsten Artikel zu Grunt und Gulp vorstellen. Doch jetzt möchte ich eine der mehreren verfügbaren Techniken behandeln, wie diese Dateien im Abschnitt "main" mithilfe des Moduls "bower-installer" besser extrahiert werden können.

Das Modul "bower-installer" kopiert alle "main"-Dateien in Ihre angegebene Ordnerstruktur. Führen Sie zunächst "npm install -g bower-installer" aus, um dieses Modul global auf Ihrem Computer zu installieren.

Fügen Sie anschließend Ihrer Datei "bower.json" einen Abschnitt hinzu, um anzugeben, wohin diese "main"-Dateien kopiert werden sollen:

"install": {
  "path": "lib"
},

Ihre "main"-Dateien für jedes Paket werden in diesem Fall einem Unterordner unter "\lib" wie beispielsweise "lib\jquery\jQuery.js, lib\angular\angular.js" hinzugefügt.

Sie können diesen Prozess ein wenig anpassen. Lesen Sie hierfür die Dokumentation zu diesem Paket unter bit.ly/1gwKBmZ.

Führen Sie abschließend "bower-installer" immer dann aus, wenn Ihre Dateien in die Ausgabeordner kopiert werden sollen. Wiederum gibt es andere Tools wie Grunt oder Gulp, um diese Dateien im Rahmen einer Aufgabe zu kopieren (Sie können sogar die Ordner auf Änderungen überwachen). Doch dies ist, wenn Sie gerade einsteigen, eine schnelle Möglichkeit mit minimalen Abhängigkeiten, die keine anderen Workflows erfordert.

Buildserver und Quellcodeverwaltung

Was ist zu tun, wenn Sie die benötigten Pakete auf einem Buildserver installieren möchten? Dies ist nützlich in Szenarien, in denen Sie wissen, dass nur Ihr Code der Quellcodeverwaltung unterliegt und alle anderen Pakete (Bower, NuGet usw.) auf einem Buildserver installiert oder erstellt (Sass, Less, CoffeeScript usw.) werden. In einigen Stores unterliegt alles der Quellcodeverwaltung, auch alle Binärdateien und Abhängigkeiten von Drittanbietern. Andere setzen auf den Paket-Manager zum Wiederherstellen der Pakete in einer Buildumgebung. Wenn ich jemandem ein Visual Studio-Projekt übergebe, erwarte ich im Allgemeinen, dass die Pakete auf seinem Computer wiederhergestellt werden. Die typische Empfehlung für Bower, was die Quellcodeverwaltung angeht, ist eine Quellcodeverwaltung für sämtlichen Drittanbietercode, wenn Sie mit möglicherweise großen Repositorys leben können oder nicht mit dem Paket-Manager arbeiten möchten. Verwenden Sie andernfalls keine Quellcodeverwaltung für "/bower_components".

Zum Installieren aller Abhängigkeiten und Kopieren von "main"-Dateien nur mithilfe der Datei "bower.json" führen Sie einfach die folgenden Befehle aus:

#Will read bower.json and install referenced packages and their dependencies
bower install
#Optional - copy each packages main{} files into your predefined path
bower-installer

Warum nicht nur NPM?

Einige Entwickler arbeiten nur mit dem NPM, andere nur mit Bower und wieder andere mit beiden. Es gibt viele Pakete, die sich sowohl in Bower als auch in NPM-Paketrepositorys befinden, was Ihren Workflow auf jeden Fall vereinfacht. Der NPM eignet sich nicht nur gut für Node.js-Apps, sondern auch für das Verwalten von sowohl clientseitigen als auch serverseitigen Paketen. Der NPM verfügt über eine geschachtelte Abhängigkeitsstruktur, was bedeutet, dass für jedes Paket, das Sie installieren, alle seine Abhängigkeiten im Unterordner "node_components" des jeweiligen Pakets installiert werden. Wenn Sie beispielsweise mit drei Paketen arbeiten und jedes jQuery verwendet, wird das gesamte jQuery-Paket dreimal getrennt installiert. Durch geschachtelte Abhängigkeiten kann eine relativ lange Abhängigkeitskette entstehen. Bei Windows-Benutzer von NPM kann deshalb an einem bestimmten Punkt der gefürchtete Pfadlängenfehler auftreten, wie z. B.: Der Verzeichnisname "C:\Users\Adam\.......\node_modules\somePackageA \node_modules\somePackageB\node_modules\insight\node_modules\inquirer\node_modules\readline2\node_modules\strip-ansi\node_modules\ansi-rege ..." ist zu lang.

Dies ist ein Nebenprodukt der geschachtelten Abhängigkeitsstruktur des NPM, wenngleich die Betaversion von NPM 3 eine Vereinfachungsmöglichkeit bietet. Mein Ziel ist es nicht, Sie von dem einen oder anderen zu überzeugen, da Sie mit beiden glücklich werden können.

Bower, ASP.NET 5 und Visual Studio

Visual Studio 2015 bietet eine integrierte Unterstützung für Bower und NPM, einschließlich Installation von Paketen und IntelliSense. Frühere Versionen von Visual Studio können dieselbe Funktionalität bieten, indem die kostenlose Package IntelliSense-Erweiterung für Visual Studio heruntergeladen und installiert wird. Abbildung 6 zeigt einige der Optionen zum Verwalten Ihrer Pakete in der Datei "bower.json".

Abbildung 6: Paketoptionen in Visual Studio

Wenn Sie, wie in Abbildung 7 gezeigt, einen Paketnamen eingeben, liefert Ihnen IntelliSense übereinstimmende Pakete und Versionen, was Ihnen eine Befehlszeile oder Websuche erspart. Nachdem Sie Änderungen an der Datei "bower.json" vorgenommen und sie gespeichert haben, wird das Paket lokal installiert, ohne zur Befehlszeile wechseln zu müssen. Auf Dateisicht gibt es hier nichts Visual Studio-spezifisches. Das heißt, dass eine standardmäßige Datei "bower.json" aus einem beliebigen Webprojekt stets funktioniert.

Abbildung 7: Bower IntelliSense in Visual Studio

Abbildung 8 zeigt Abhängigkeiten in "bower.json" im Projektmappen-Explorer und dass Bower vollständig in Ihre Webprojekte und Visual Studio integriert ist.

Abbildung 8: Bower-Abhängigkeiten im Projektmappen-Explorer

Ab ASP.NET 5 gibt es eine neue Projektstruktur, in der alle Dateien in Ihrem Projektordner standardmäßig in Ihr Projekt einbezogen werden. Doch nur Elemente im Ordner "/wwwroot" Ihres Webprojekts sind als statische Inhalte adressierbar, z. B. HTML, CSS, Bilder und JavaScript-Dateien. Vor diesem Hintergrund können Sie die Konfiguration Ihrer Datei "bower.json" so festlegen, dass "bower-installer" Ihre Abhängigkeiten in diesen Ordner kopiert (obgleich die standardmäßigen ASP.NET 5-Vorlagen Gulp zum Kopieren vordefinierter Dateien an ihre Ziel verwenden, was ich im nächsten Artikel erörtere).

NuGet-Pakete sind weiterhin beeindruckend und werden vor allem in ASP.NET 5-Projekten umfassend verwendet und unterstützt. Als kurze Anmerkung sei gesagt, dass NuGet-Einstellungen in den Abschnitt "dependencies" der Datei "project.json" einfließen, aber in Visual Studio unter "Verweise" angezeigt werden. NuGet-Pakete werden standardmäßig für serverseitige Pakete, z. B. für Protokollierung und MVC-Unterstützung, genutzt.

Zusammenfassung

Bower ist ein großartiges Tool, das mühelos in Ihren Front-End-Workflow integriert werden kann. Seine API ist einfach zu nutzen, und dank der integrierten Unterstützung in Visual Studio können Sie es parallel zu NPM und NuGet verwenden, um sowohl Front-End- als auch Back-End-Pakete zu verwalten. Nehmen Sie sich eine Stunde oder zwei Zeit, um Bower zu erlernen. Sie werden es nicht bereuen.

Adam Tuliper ist ein Senior Technical Evangelist bei Microsoft und lebt im sonnigen Südkalifornien. Er ist ein Web- und Spieleentwickler, Pluralsight-Autor und ein vielseitig interessierter Techniknarr. Er teilt sich auf Twitter @AdamTuliper und unter adamt@microsoft.com mit.

Unser Dank gilt dem folgenden technischen Experten bei Microsoft für die Durchsicht dieses Artikels: Michael Palermo