Pakete installieren mit npm

Der package manager npm dient zum Installieren von Node.js Packages. Man kann mit npm node packages zum aktuellen Projekt installieren (.\node_modules) oder global, für alle Projekte des Benutzers.

Dieser Artikel ist Teil der Serie: Ionic_Start - Teil 4

Auch in diesem Teil geht es eigentlich noch um das Einrichten der Entwicklungsumgebung, jedoch benötigt man diese Informationen auch später immer wieder, wenn z.B. ein JavaScript Paket in neuer Version verfügbar ist.

Zunächst wollen wir ein paar Packages global installieren, damit wir Client Interface Befehle wie gulp, ionic usw. in jedem Verzeichnis aufrufen können. Die Pakete werden in folgendem Ordner abgelegt.

C:\Users\yourName\AppData\Roaming\npm\node_modules\

Pakete werden immer auch gecacht und zwar im Ordner:

C:\Users\yourName\AppData\Roaming\npm-cache

Bemerkung:

PowerShell: $env:APPDATA
Cmd: %APPDATA%
zeigt auf C:\Users\yourName\AppData\Roaming

Um ein Paket zu installieren:

npm install -g paketname

(-g oder —global)

Bei Fehlern sind, meiner Erfahrung nach, meist die Proxy Einstellungen Schuld.

So wie schon beim Eintrag NodeJS + Npm installieren, indem versucht wird das Package: npm-windows-upgrade zu installieren.

Falls kein Fehler auftritt, kann man dann auch gleich mehrere Packages installieren.

npm install -g bower grunt-cli gulp gulp-cli
npm install -g cordova ionic
npm install -g tsd typescript
npm install -g yo

Damit haben wir

die Task runner: gulp und grant,
den Package Manager bower,
die Frameworks für die mobile App Entwicklung: cordova und ionic
die Tools für die Sprache: Typescript (compiler und tsd) und
das scaffolding tool Yeoman (Mit dem man Grundgerüste für sein Projekt erstellen kann - ähnlich den Templates in Visual Studio).

Beim Installieren immer kurz den Output überfliegen und nach den roten Error Zeilen Auschau halten. Warungen, wie

npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm

kann man ignorieren, darum soll sich das jeweilige Package in der nächsten Version kümmern.

Errors dagegen, muss man nachgehen.

Hat man alles installiert, sollte die Abfrage ungefähr so aussehen:

PS C:\> npm list -g --depth=0
C:\Users\yourName\AppData\Roaming\npm
+-- bower@1.7.2
+-- cordova@5.4.1
+-- grunt-cli@0.1.13
+-- gulp@3.9.0
+-- gulp-cli@1.1.0
+-- ionic@1.7.12
+-- npm-windows-upgrade@1.2.0
+-- tsd@0.6.5
+-- typescript@1.7.5
`-- yo@1.6.0

Fehlerbehandlung

Übrig gebliebene Pakete

Fehler wie:

npm ERR! extraneous: cordova C:\Users\yourName\AppData\Roaming\npm\node_modules\vs-tac\node_modules\cordova

Beim Upgraden von npm udgl. habe ich es leider immer wieder erlebt, dass derartige Fehler in den globalen node_modulen aufgetreten sind. Irgendwelche Abhängigkeiten wurden nicht aktualisiert oder wie oben, ein Package wird nicht mehr benötigt.

Ich habe immer versucht durch update oder deinstall und wieder install das Repository zu reinigen. Doch meist half am Ende nur das Löschen der Packages und sie neu zu installieren. Das dauert zwar, aber man kann ja inzwischen was anderes machen.

Folgender Vorgang:

Mit npm list -g --depth=0 die zu installierten Pakete auflisten. Dann den Ordner C:\Users\yourName\AppData\Roaming\npm löschen.

Und nun die Pakete neu installieren.

npm install -g npm-windows-upgrade bower grunt-cli gulp gulp-cli cordova ionic tsd typescript yo

Falls die Fehlermeldung darauf schließen lässt, dass nur ein Paket Schuld an dem Problem ist, kann man natürlich auch nur dieses updaten.

npm update -g cordova

Oder

npm uninstall -g cordova
npm install -g cordova

Manchmal muss man auch den entsprechenden Ordner in $env:APPDATA\npm\node_modules\ explizit löschen.

Visual Studio – Tools for Apache Cordova

Das Package vs-tac: Visual Studio – Tools for Apache Cordova wird von Visual Studio installiert. - Dies ist nicht in der npm Registry und kann folgendermaßen neu installiert werden:

npm install -g "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\ApacheCordovaTools\packages\vs-tac"

(siehe Configure the Visual Studio Tools for Apache Cordova Absatz: “To re-install vs-tac”)

Fehler:

npm ERR! invalid: readable-stream@1.1.13-1 
C:\Users\yourName\AppData\Roaming\npm\node_modules\vs-tac\node_modules\cordova-lib\node_modules\cordova-js\node_modules\browserify\node_modules\concat-stream\node_modules\readable-stream

…

Ein ungelöstes Problem. TODO

Pfadlänge

Ein großes Problem, das einem als Windows User immer wieder über den Weg läuft, ist:

Der angegebene Pfad und/oder Dateiname ist zu lang. Der vollständig qualifizierte Dateiname muss kürzer als 260 Zeichen und der Pfadname kürzer als 248 Zeichen sein.

Ich hatte das Problem, als ich ghost in eine Azure WebSite deployen wollte. In so einem Fall kann man dann höchstens versuchen, das problematische Package nicht zu verwenden, indem man z.B. eine ältere Version verwendet.

Platz für weitere Problem

TODO

Helpful Information:

Dieser Artikel ist Teil der Serie Ionic_Start.
Links und Glossar