Archiv der Kategorie: Node.js

Visual Studio 2013/2015 bereitgestellte nodejs Version veraltet


Wenn man Visual Studio installiert wird bereits eine nodejs Version mit installiert, aber nicht im Standardpfad von nodejs. Wenn man also eine aktuelle nodejs Version auf seinem System installiert hat, verwendet diese Visual Studio NICHT automatisch. Meist merkt man dies erst, wenn man versucht npm pakete über Visual Studio zu installieren und in der Ausgabe Fehler erscheinen

npm WARN package.json @ No description
npm WARN package.json @ No repository field.
npm WARN package.json @ No README data

npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.9
npm ERR! code E404

===npm command completed with exit code 1====

und es werden keine npm Pakete installiert.

Daher ist es notwendig das man nodejs auf dem Rechner selbst installiert und dann in Visual Studio als externes Webtool Einträgt. Sobald man nodejs installiert hat, geht man in Visual Studio auf

“Extras => Optionen => Projekte und Projektmappen => Externe Webtools”

und fügt dort den aktuellen Installationspfad von nodejs hinzu und verschiebt diesen ganz nach oben. Dann muss Visual Studio noch einmal neu gestartet werden und jetzt klappt es auch mit der Installation der npm Pakete.

nodeJsVisualStudioEinstellen

Wenn ein update von npm notwendig ist, dann einfach über die normale Konsole global aktualisieren und in Visual Studio wird dann ebenfalls diese Version verwendet.

Advertisements

AngularJS minification mit npm (node.js) und ng-annotate


Wenn ich aktuell AngularJS Module erstelle, dann achte ich bereits darauf das der Code minify fähig ist. Denn durch die Verwendung von Dependency Injection (DI) von AngularJS muss beim Schreiben von AngularJS Modulen bereits darauf geachtet werden das der Code minify fähig ist.

Daher wird aus dem Folgenden nicht minify fähigen Code:

angular.module("AngularStrapModalCtrl", [])
    .controller("AngularStrapModalCtrl", function ($modal, $scope, modalCtrl) {
    $scope.modal = {
        testModalCtrl: modalCtrl
    };
})
.controller("modalCtrl", function ($scope) {

    this.name = "testname";
    $scope.test = "blubb";
});

Der minify fähige Code:

angular.module("AngularStrapModalCtrl", [])
    .controller("AngularStrapModalCtrl", ["$modal", "$scope", "modalCtrl", function ($modal, $scope, modalCtrl) {
    $scope.modal = {
        testModalCtrl: modalCtrl
    };
}])
.controller("modalCtrl", ["$scope", function ($scope) {

    this.name = "testname";
    $scope.test = "blubb";
}]);

Denn die Funktionsparameter die normalerweise über DI aufgelöst werden, werden in einem String Array definiert und damit weiß AngularJS auch nach dem minifien weiterhin das für einen Parameter z.B. mit dem Namen “a” als “$scope” aufgelöst werden soll. Hierbei ist es wichtig das die Reihenfolge der Werte im String Array der Parameter im Funktionsaufruf entspricht.

Wenn man aber auf Module von anderen Entwicklern zurückgreift, dann sind diese Module nicht immer minify fähig und müssten für diesen Zweck von uns von Hand angepasst werden. Hier kann uns der Node Package Manager npm weiterhelfen, der direkt mit node.js installiert wird und eine eigene Konsole zur verfügung stellt. Eine gute Einführung in npm stellt die Seite selbst zur Verfügung.

Denn für npm gibt es das Packet “ng-annotate” welches die oben genannte minify Funktion bereits vollautomatisch für uns ausführt. Installiert wird “ng-annotate” über die npm Konsole welche direkt mit node.js installiert wird.

image

Den Befehl auf der npm Konsole ausführen, um “ng-annotate” zu installieren.

npm install -g ng-annotate

Beim Installieren von npm Paketen kann es zu einem Timeout kommen, vor allem wenn man hinter einem Proxyserver sitzt. Mir hat dabei der folgende Eintrag weitergeholfen:

http://jjasonclark.com/how-to-setup-node-behind-web-proxy

Wenn “ng-annotate” erfolgreich installiert wurde, dann kann man über einen einfachen Befehl auf der npm Konsole unser Angular Modul minify fähig machen.

C:\>ng-annotate –add „c:\Temp\nichtMinifyFaehig.js“ -o „c:\Temp\minifyFaehig.js“

Die Ausgabedatei enthält dann den kompletten AngularJS Modulcode inkl. der Parameterarrays für die minification.

Das ganze lässt sich natürlich entsprechend ausbauen, das dies immer ausgeführt wird wenn das Projekt erstellt wird, … hier sind dem Entwickler wie immer keine Grenzen gesetzt.