Archiv für den Monat Juli 2017

Webpack 2 Parameterübergabe and den Buildprozess auf der Konsole


Die meisten Beispiele für Webpack enthalten fertige Konfigurationen die als npm scripte hinterlegt sind. Wenn man aber einen automatisierten Build Prozess verwendet z.B. über den TFS, dann möchte man evtl. einige Variablen von außen an den Buildprozess übergeben. Dazu könnte z.B. die “baseUrl” gehören, wenn die Anwendung nicht im Root des Webserver gehostet wird.

Wenn man z.B. angular-starter installiert und man an den Befehle für “build:prod” noch den Namen der Anwendung übergeben möchte, damit dieser als “baseUrl” gesetzt wird, dann sind dafür die folgenden Schritte notwendig.

Anpassen der package.json, hier müssen zwei “- -“ (doppeldashes) entfernt werden, da sonst die Übergabeparameter nicht gesetzt/erkannt werden.

Vorher:

„build:prod“: „npm run clean:dist && npm run webpack — –config config/webpack.prod.js –progress –profile –bail“,

Nachher:

„build:prod“: „npm run clean:dist && npm run webpack –config config/webpack.prod.js –progress –profile –bail“,

Dann passen wir die “webpack.prod.js” an und prüfen ob der “appname” übergeben wurde und erweitern bei Bedarf die “environment” Variable um den Appnamen

Dann wird noch die “webpack.common.js” angepasst und wenn der “appname” gesetzt ist, ersetzen wir die “baseUrl”

jetzt können wir die passende Kommandozeile aufrufen und den passenden “appnamen” übergeben

npm run build:prod — –env.appname „meineAnwendung“

hier können wir jetzt beliebig viele Parameter übergeben z.B.

npm run build:prod — –env.appname „meineAnwendung“ –env.test “../testFolder”

Wenn wir den Befehl ausführen, dann kann man in der Konsole auch unser “console.log” sehen und man sieht das webpack hier ein JSON Objekt erstellt auf das wir entsprechend in der “webpack.prod.js” über die “env” Variable zugreifen können.  Damit lassen sich beliebige Informationen von außen über eine Buildumgebung noch an webpack übergeben.

CSS IntelliSense in Visual Studio mit Angular und Resharper


Manchmal könnte man sagen “früher” war alles besser. Zumindest war es mit Angular 1 und dem “alten” System in dem man noch direkt JavaScript und Styles eingebunden hat, einfacher im HTML die passende IntelliSense für die CSS Klassen mit der Hilfe von Resharper zu erhalten. Dabei handelte es sich z.B. um Bootstrap und font awesome Klassen.

Wenn man jetzt aber das ganze für Angular 2 möchte, wo alle Styles und Scripts nur noch aus dem node_modules Ordner referenziert werden und das Projekt mit Hilfe von Webpack gebaut wird. Gibt es nicht mehr “einfach” so die IntelliSense für die CSS Klassen.

Auch auf Addons wie Glyphfriend kann man leider nicht zurückgreifen, denn hier muss man die IntelliSense für HTML und CSS im Resharper ausstellen, damit die IntelliSense von Visual Studio greift. Dann hat man aber keine Autovervollständigung von Angular 2 Variablen im HTML Template mehr – was meiner Meinung nach noch wesentlich wichtiger ist.

Hier bleibt meines Wissens aktuell leider nur eine Möglichkeit, man kopiert sich die passenden css Dateien aus dem node_modules Ordner und fügt die Dateien bei sich im Projekt ein und macht noch einen Vermerk das die Dateien nur für die IntelliSense im Projekt enthalten sind aber nicht direkt referenziert werden.

image

wie man sieht hat man dann auch IntelliSense für Bootstrap 4 und die Klassen sind nicht alle unterstrichen (was normalerweise bedeutet das er die Klasse nicht kennt).

image

Auch font awesome geht wieder.

image