Wie man NPM und Bower installieren kann

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

In Webdesign-Projekten verwenden wir gewöhnlich Pakete von Drittanbietern.

Wir laden CSS von Drittanbietern aus Projekten wie Bootstrap und Foundation sowie Skripten wie jQuery und Modernizr. Zunehmend verwenden wir auch Pakete von Drittanbietern als Teil von Entwicklungsprozessen, z.B. Compiler für CSS-Präprozessoren oder Tools zur Codebereinigung und -komprimierung, um die Geschwindigkeit zu maximieren, mit der unsere Websites geladen und ausgeführt werden.

Der Umgang mit allen diesen Paketen kann schnell zu einem Durcheinander beim manuellen Herunterladen, Übertragen und Aktualisieren von Dateien werden. Sicher, wir haben dafür gesorgt, dass es funktioniert, aber es ist zeitaufwändig und aufgrund seiner Unhandlichkeit werden Projekte häufig mit veraltetem Code verwendet. Jetzt gibt es eine bessere Möglichkeit, Paketmanager mit Befehlszeilenfunktion zu verwenden.

In diesem Tutorial erfahren Sie, wie Sie mit Paketen von Drittanbietern umgehen, indem Sie nur eine Handvoll Befehle mit zwei bis fünf Wörtern eingeben.

Hinweis: Wenn Sie das erste Tutorial in dieser Reihe, "Erfassen der Grundlagen", nicht befolgt haben, ist es hilfreich, dies durchzugehen, bevor Sie hier beginnen.

Die "Big Two" -Paketmanager

Um die Befehlszeile für die Verarbeitung von Paketen von Drittanbietern zu verwenden, benötigen Sie zunächst ein "Paketverwaltungssystem" oder "Paketmanager". Die beiden derzeit bei Webdesignern mit Abstand beliebtesten Optionen sind npm und Bower. Dies sind die Systeme, die Sie heute lernen werden.

npm (über Node.js)

Vielleicht haben Sie schon von Node.js gehört, einer auf JavaScript basierenden Sammlung von Extras, die alles von Blog-Plattformen über das Codieren von IDE, Media Center bis hin zu ganzen Betriebssystemen unterstützen.

Zusammen mit einer Installation von Node.js kommt der Paketmanager npm, ein äußerst nützliches System, das in dieser Serie häufig verwendet wird.

Im Gegensatz zu dem, was Sie vielleicht zuerst denken, steht npm nicht für "Node Package Manager". Offiziell steht es für "npm ist kein Akronym" und oben auf der Website werden bei jeder Aktualisierung kleine Witze auftauchen, wie "Niemals Affen stupsen" und "Molche majestätisch vorführen".

Ab diesem Moment bietet npm Zugriff auf und Verwaltung von 127.664 Paketen, die für alle Arten von Zwecken entwickelt wurden. Unter den für das Webdesign nützlichen Elementen finden Sie Pakete wie:

Stylus
node-sass
LESS
Jade
UglifyJS
Bower
Grunt
Gulp
Yeoman
Autoprefixer
BrowserSync
Foundation CLI
UglifyJS
clean-css
Jeet.gs
Kouto Swiss

Für die Zwecke dieses Tutorials verwenden wir npm in Verbindung mit Node.js. Es handelt sich jedoch um eine unabhängige Entität, die mit anderen Systemen wie dem neu angekommenen IO.js verwendet werden kann.

Als Anfänger empfehle ich, den Tutorials mit Node.js zu folgen, aber Sie möchten vielleicht später andere Optionen erkunden.

Bower

Meine Einführung in die Verwendung der Befehlszeile für die Paketverwaltung von Drittanbietern erfolgte tatsächlich über Bower. Jemand gab mir einen Hinweis, indem er nur sagte

„Hast du es mit Bower versucht? Es ist toll!"

Ich hatte keine Ahnung, wofür es verwendet werden sollte, also ging ich zu www.bower.io und ein Blick auf die Liste der verfügbaren Pakete genügte, um die Glühbirne auszulösen.

Die Bower-Paketbibliothek enthält Dinge wie:

Bootstrap
AngularJS
jQuery
Font Awesome
HTML5 Boilerplate
Animate.css
Normalize.css
Modernizr
Underscore
Flat UI
jQuery UI
Handlebars
Masonry

Die Chancen stehen sehr hoch, dass Sie regelmäßig mindestens ein oder zwei dieser Pakete in Ihren Projekten verwenden. Bower macht es Ihnen schneller und einfacher, dies weiter zu tun.

Wann ist Bower vs. npm zu verwenden?

In einigen Fällen ist möglicherweise ein Paket sowohl für npm als auch für Bower verfügbar. Wenn ja, welche Version sollten Sie verwenden?

Beide Optionen installieren und aktualisieren Pakete genauso schnell wie die anderen. Es gibt keine festen Regeln, auf die Sie sich stützen können, und letztendlich entwickeln Sie Ihre eigene Vorgehensweise. Daher gebe ich Ihnen nur eine allgemeine Faustregel, auf die Sie Ihre Entscheidungen vorerst stützen können.

Aus Sicht des Webdesigns hängt der Unterschied wirklich davon ab, wie Sie die Pakete verwenden, und die beiden typischen Anwendungsfälle, die Sie haben, betreffen die Front-End-Bereitstellung und die Entwicklung.

Bower wurde für die Verwaltung von Front-End-Paketen entwickelt. Wählen Sie diese Option, wenn Sie nach etwas suchen, das von Website-Besuchern über einen Browser verwendet wird.

Auf der anderen Seite sind npm-Pakete die richtige Wahl, wenn Sie ein Paket nur als Teil Ihres Entwicklungsprozesses verwenden und es nicht im fertigen Produkt enthalten ist.

Installation von npm und Bower

Installieren Sie Node.js und npm

Zum Glück ist die Installation von npm recht einfach, da es mit dem Installationsprogramm für Node.js gebündelt ist. Gehen Sie zu http://www.nodejs.org und laden Sie das Installationsprogramm für Ihre Plattform herunter. Installieren Sie es auf Ihrem Computer und npm wird zusammen mit ihm installiert. Dann können Sie fortfahren.

Wichtig! Auch wenn Sie Node.js bereits auf Ihrem System installiert haben, führen Sie die obigen Schritte aus, um sicherzustellen, dass Sie über die neueste Version verfügen. Wenn Sie eine veraltete Version ausführen, funktionieren einige der Schritte, die Sie beim Durchlaufen dieser Serie ausführen müssen, möglicherweise nicht.

Update npm

Laut der npm-Site ist wahrscheinlich eine spätere Version von npm verfügbar als die, die Sie mit Ihrer Node.js-Installation gebündelt erhalten.

So stellen Sie sicher, dass Sie die neueste Version verwenden:

1	[sudo] npm install npm -g

Installieren Sie Git / MsysGit

Git ist zusammen mit Node.js und npm eine Voraussetzung für die Verwendung von Bower. Git ist auch eine Voraussetzung für einige der anderen Webdesign-orientierten Pakete, die Sie verwenden möchten. Lassen Sie uns also alles auf Ihrem System erledigen, bevor Sie fortfahren.

Für OSX-Benutzer

Für OSX-Benutzer möchten Sie die Git-Hauptwebsite aufrufen, das Binärinstallationsprogramm herunterladen und wie jedes andere App-Installationsprogramm ausführen: http://git-scm.com/download/mac

Für Windows-Benutzer

Um Bower unter Windows verwenden zu können, benötigen Sie stattdessen eine bestimmte Version von Git für Windows mit dem Namen msysGit. Klicken Sie auf die Schaltfläche Herunterladen und rufen Sie das ausführbare Installationsprogramm auf, führen Sie es jedoch noch nicht aus: http://msysgit.github.io

Der Grund, warum ich gesagt habe, dass ich es noch nicht installieren soll, ist, dass Sie beim Ausführen des Installationsprogramms darauf achten müssen, die richtige Einstellung zu wählen. Wenn der folgende Bildschirm angezeigt wird, aktivieren Sie Git an der Windows-Eingabeaufforderung ausführen.

Weitere Informationen zum Installieren von msysGit als Voraussetzung für Bower finden Sie unter: Ein Hinweis für Windows-Benutzer.

Bower installieren

Bower kann über npm installiert werden, indem dieser Befehl ausgeführt wird:

1	[sudo] npm install -g bower

Mac-Benutzer, da wir das Flag -g verwenden, um Bower global zu installieren, denken Sie daran, dass Sie wahrscheinlich sudo am Anfang des Befehls einfügen müssen, und geben Sie dann Ihr Kennwort ein, wenn Sie dazu aufgefordert werden.

Grundlagen von npm und Bower

Initialisieren Sie ein Projekt

Sowohl npm als auch Bower arbeiten mit speziellen Manifestdateien, die Informationen zu einem Projekt und eine Liste der verwendeten Pakete enthalten. Bei npm-Projekten heißt diese Datei "package.json" und in Bower-Projekten "bower.json". Der einfachste Weg, diese Dateien zu erstellen, besteht darin, den zugehörigen Befehl init zu verwenden. Lass uns das jetzt machen.

Über npm

Führen Sie den folgenden Befehl aus, während Ihr Terminal auf den Stammordner Ihres Projekts zeigt:

npm init

Auf diese Weise erhalten Sie eine Reihe von Fragen, die Sie im Terminal beantworten können. Sie enthalten die Informationen, aus denen Ihre Datei "package.json" erstellt wird.

Weitere Informationen zum Befehl npm init finden Sie unter: https://docs.npmjs.com/cli/init

Über Bower

Führen Sie den folgenden Befehl aus, während Ihr Terminal auf den Stammordner Ihres Projekts zeigt:

1	bower init

Genau wie beim Initialisierungsprozess von npm beantworten Sie eine Reihe von Fragen, und Ihre Antworten bilden Ihre Datei "bower.json".

Weitere Informationen zum Befehl bower init finden Sie unter: http://bower.io/docs/creating-packages/#bowerjson

Nach Paketen suchen

Nachdem das Projekt initialisiert wurde, können Sie mit dem Einbringen von Paketen beginnen. Dazu müssen Sie die Pakete finden, die Sie über npm oder Bower verwenden möchten.

Sie müssen am richtigen Ort suchen, da Sie den korrekten Namen des Pakets innerhalb des npm- oder Bower-Ökosystems kennen müssen, um es installieren und aktualisieren zu können.

Über npm

Sie können über die Suchleiste oben auf der Startseite nach Paketen suchen, die Sie mit npm verwenden möchten.

Es ist auch möglich, direkt über die Befehlszeile mit npm search <package> zu suchen. Ich persönlich finde es jedoch einfacher, das Gesuchte direkt auf der npm-Site zu finden.

Wenn Sie das Paket finden, das Sie verwenden möchten, notieren Sie sich den Paketnamen.

Über Bower

Die Suche nach Bower-Paketen kann über http://bower.io/search/ erfolgen.

Notieren Sie sich wie bei npm den Paketnamen, den Sie verwenden möchten, sobald Sie ihn gefunden haben.

Neue Pakete installieren

Sobald Sie ein Paket gefunden haben, das Sie verwenden möchten, können Sie es installieren. Hier verwenden Sie den Paketnamen, den Sie notiert haben. Verwenden Sie diesen Namen in den folgenden Anweisungen überall dort, wo Sie <package> in einem Befehl sehen.

Über npm

Führen Sie Folgendes aus, um ein Paket lokal zu installieren, d. H. Nur in Ihrem Projektordner.

1	npm install <package>

Das Paket wird in einen Unterordner mit dem Namen "node_modules" heruntergeladen und steht für die Verwendung in Ihrem Projekt zur Verfügung. Zum Beispiel:

Neben der lokalen Installation von Paketen besteht auch die Möglichkeit, npm-Pakete global zu installieren.

Lokal installierte Pakete können nur im Kontext Ihres Projekts verwendet werden. Global installierte Pakete können jedoch von überall auf Ihrem Computer verwendet werden. Wenn das Paket "less" beispielsweise global installiert ist, können Sie damit jedes ".less" -Dokument an einer beliebigen Stelle in Ihrem System kompilieren.

Um ein Paket global zu installieren, fügen Sie Ihrem Befehl das Flag -g hinzu:

1	[sudo] npm install <package> -g

Über Bower

Der Installationsprozess für Bower-Pakete ist mit dem folgenden Befehl fast genau der gleiche wie bei npm:

1	bower install <package>

Der Unterschied besteht darin, dass Bower-Pakete in einem Unterordner mit dem Namen "bower_components" abgelegt werden, zum Beispiel:

Da Sie Bower zum Bereitstellen von Front-End-Paketen in bestimmten Projekten verwenden, können alle Ihre Installationen lokal durchgeführt werden, sodass Sie das Flag -g nicht verwenden müssen.

Arbeiten mit Abhängigkeiten

Wenn Sie daran interessiert sind, ein Projekt, in dem Sie npm oder Bower verwendet haben, zu teilen oder einfach nur zu duplizieren und zu verschieben, ist das Abhängigkeitsmanagement eine gute Sache, die Sie kennen sollten. Lassen Sie mich erklären, warum.

Sie werden die zuvor erstellten Manifestdateien zurückrufen. "package.json" und "bower.json". In jede dieser Dateien können Sie eine Liste von Paketen einfügen, von denen Ihr Projekt abhängt.

Sie haben bereits gesehen, wie npm-Pakete in einen Ordner mit dem Namen "npm_modules" und Bowers in "bower_components" verschoben werden. Das Coole ist, wenn Sie Ihr Projekt freigeben möchten, können Sie beide Ordner vollständig weglassen, solange Ihre Abhängigkeiten in Ihren Manifestdateien aufgeführt sind.

Auf diese Weise können Sie leicht ein paar hundert Megabyte oder so sparen, was das Verschieben Ihres Projekts erheblich erleichtert.

Wenn jemand anderes Ihr Projekt in die Hand nimmt, kann er npm install ausführen und alle in der Datei "package.json" aufgeführten Pakete werden automatisch in einen neuen Ordner "npm_modules" heruntergeladen.

Ebenso lädt der Befehl bower install automatisch alle in der Datei "bower.json" aufgeführten Abhängigkeiten herunter und legt sie in einem neuen Ordner "bower_components" ab.

Produktions- und Entwicklungsabhängigkeiten

Es gibt zwei Arten von Abhängigkeiten:

Produktionsabhängigkeiten - Im Kontext des Webdesigns bezieht sich dies auf Pakete, die im Front-End bereitgestellt werden, z. Modernizr für Cross-Browser-Kompatibilität.
Entwicklungsabhängigkeiten - im Kontext des Webdesigns bezieht sich dies auf Pakete, die während der Entwicklung verwendet werden, z. LESS für .less Dateikompilierung.

Mit Bower und npm können Sie Produktions- und Entwicklungsabhängigkeiten angeben. Wie bereits erwähnt, verwenden Sie Bower für Front-End-Pakete und npm für Entwicklungspakete. Daher legen wir fest, dass Ihre Bower-Pakete Produktionsabhängigkeiten und Ihre npm-Module Entwicklungsabhängigkeiten sind.

Die Methode zum Festlegen von Abhängigkeiten ist in npm und Bower gleich. Fügen Sie dem Befehl, mit dem Sie ein Paket installieren, ein Flag hinzu.

Als Entwicklungsabhängigkeit installieren

Um ein Paket als Entwicklungsabhängigkeit festzulegen, fügen Sie das Flag --save-dev hinzu, z.

1	npm install <package> --save-dev

Das Paket wird auf die gleiche Weise installiert, wie Sie es bereits gesehen haben, es wird jedoch wie folgt zur Liste der devDependencies in Ihrer Datei "package.json" hinzugefügt:

Als Produktionsabhängigkeit installieren

Um ein Paket als Produktionsabhängigkeit festzulegen, fügen Sie das Flag --save hinzu, z.

1	bower install <package> --save

In diesem Fall wird das Paket zur Liste der dependencies in der "bower" hinzugefügt. Datei wie folgt:

Hinweis: Wenn Sie npm-Pakete global mit dem Flag -g installieren, müssen Sie sich keine Gedanken über die Verwendung der Flags --save oder --save-dev machen.

Pakete aktualisieren

Das Aktualisieren von Paketen ist auch ein einzeiliger Befehl für Bower und npm.

Über npm

Führen Sie für lokal installierte Pakete den folgenden Befehl im Stammordner Ihres Projekts aus, in dem sich Ihr Ordner "node_modules" befindet:

1	npm update <package>

Um stattdessen global installierte Pakete zu aktualisieren, fügen Sie das Flag -g hinzu:

1	[sudo] npm update <package> -g

Sie können auch den Paketnamen weglassen, damit Sie alle Pakete gleichzeitig stapelweise aktualisieren können.

Um alle Pakete in einem bestimmten Projekt zu aktualisieren, zeigen Sie mit Ihrem Terminal auf den Stammordner und führen Sie Folgendes aus:

1	npm update

Und um alle Ihre global installierten Pakete zu aktualisieren, führen Sie Folgendes aus:

1	[sudo] npm update -g

Über Bower

Das Aktualisieren von Bower-Paketen ist im Wesentlichen dasselbe wie bei npm. Führen Sie im Stammordner Ihres Projekts, in dem sich Ihr Ordner "bower_components" befindet, den folgenden Befehl aus:

1	bower update <package>

Die neueste Version wird automatisch heruntergeladen und in Ihren Ordner "bower_components" eingefügt.

Verwenden von npm- und Bower-Paketen

Sobald Sie Ihre Pakete installiert haben, möchten Sie vielleicht wissen, wie Sie sie überhaupt verwenden können, oder?

Mit Bower-Paketen kann der Prozess der gleiche sein, den Sie zum normalen Abrufen von Assets verwenden würden, d.h. über script- oder link -Elemente in Ihrem HTML-Code, wobei Dateien direkt aus Ihrem Ordner "bower_components" geladen werden.

Das ist jedoch nicht optimal und es gibt bessere Möglichkeiten, dies zu tun. Zum Beispiel, Sie können alle JS-Dateien, die Sie aus Ihren Bower-Paketen verwenden, in einer komprimierten Datei zusammenführen und diese stattdessen laden.

Eine Demonstration dazu finden Sie im kommenden Tutorial Automatisierung mit Task Runnern.

Über npm installierte Pakete werden normalerweise über Befehlszeilen- oder Task-Runner-Skripte verwendet.

Verschiedene Pakete verfügen über einen eigenen Satz integrierter Befehle, die Sie für alle möglichen Aufgaben wie Kompilieren, Komprimieren, Kombinieren und mehr verwenden können. Diese paketspezifischen Aufgaben können wiederum automatisiert werden, indem Aufgabenläufer so eingerichtet werden, dass mehrere Aufgaben gleichzeitig ausgeführt werden.

In den folgenden Tutorials dieser Serie erfahren Sie, wie Sie npm-Pakete auf beide Arten verwenden.

Im nächsten Tutorial

Im nächsten Tutorial erfahren Sie, wie Sie die Befehlszeile nutzen können, um Ihrem Front-End-Code eine völlig neue Effizienzstufe hinzuzufügen, sowohl bei der Entwicklung als auch bei der Ausführung nach Abschluss.

Sie erfahren, wie Sie die Befehlszeile für die Präprozessor-Kompilierung, die automatische CSS-Korrektur, die Optimierung von JS- und CSS-Dateien sowie die Kompilierung für HTML-Kurzschrift und Vorlagen verwenden.

Wir sehen uns im nächsten Tutorial, Powering Up Front End Code.