MSBuild und Webpack

Question

Ich entwickle eine Angular2-Anwendung in VS2015 und lasse eine Webpack-Bündel- und Minifikationsumgebung für dasselbe einrichten.

Das ist mein webpack.conf.js

switch (process.env.NODE_ENV) { 
 
    case 'prod': 
 
    case 'production': 
 
     module.exports = require('./config/webpack.prod'); 
 
     break; 
 
    case 'test': 
 
    case 'testing': 
 
     //module.exports = require('./config/webpack.test'); 
 
     break; 
 
    case 'dev': 
 
    case 'development': 
 
    default: 
 
     module.exports = require('./config/webpack.dev'); 
 
}

Ich habe auch eine webpack Aufgabe Läufer installiert, die dies mit den folgenden Befehlen ruft

cmd /c SET NODE_ENV=development&& webpack -d --color 

und

cmd /c SET NODE_ENV=production&& webpack -p --color 

Das Setup scheint gut zu funktionieren. Ich möchte dies jedoch mit meinem TFS Build CI integrieren. Der Befehl webpack sollte ausgelöst werden, nachdem das Projekt erstellt wurde, und einen Buildfehler melden, wenn das Webpack-Build fehlschlägt. Ich habe versucht, den folgenden Code in meiner CSPROJ Datei

<Target Name="AfterBuild"> 
<Exec Condition="$(Configuration) == 'Debug'" Command="cmd /c SET NODE_ENV=production&& webpack -p --color"> 
</Exec> 
</Target> 

Er scheiterte mit einem Fehler 9009

Danach einzuarbeiten habe ich versucht, den Befehl aus dem node_modules Ordner ab und startete wo webpack installiert wurde

<Target Name="AfterBuild"> 
<Exec Condition="$(Configuration) == 'Debug'" Command="./node_modules/.bin cmd /c SET NODE_ENV=production&& webpack -p --color"> 
</Exec> 
</Target> 

noch vergeblich. Selbst wenn ich das zum Laufen bringe, bin ich mir nicht sicher, ob dies dazu führen würde, dass der VS-Build fehlschlägt, wenn ein Fehler im Webpack auftritt.

Wie gehe ich damit fort?

Answer 1

Fügen Sie in package.json verschiedene Skripte für den Entwicklungs- und Produktionsmodus ein. Rufen Sie dann diese Skripte beim Ereignis 'AfterBuild' von Visual Studio in verschiedenen Konfigurationen auf.

Fügen Sie die folgenden zwei Skripte, 'buildDev' und in package.json 'buildProd':

"scripts": { 
    "buildDev": "SET NODE_ENV=development && webpack -d --color", 
    "buildProd": "SET NODE_ENV=production && webpack -p --color", 
    } 

In Afterbuild Ereignisse von Visual Studio diesen beiden bedingten Befehle hinzufügen:

<Target Name="AfterBuild"> 
    <Exec Condition="$(Configuration) == 'Debug'" Command="npm run buildDev" /> 
    <Exec Condition="$(Configuration) == 'Release'" Command="npm run buildProd" /> 
    </Target> 

Und schließlich webpack.conf.js wie folgt:

switch (process.env.NODE_ENV.trim()) { 
    case 'prod': 
    case 'production': 
     module.exports = require('./config/webpack.prod'); 
     break; 
    case 'dev': 
    case 'development': 
    default: 
     module.exports = require('./config/webpack.dev'); 
     break; 
} 

Wichtiger Hinweis: Achten Sie darauf, zu Verwendung trim() Funktion mit process.env.NODE_ENV als cmd wird das Leerzeichen in dem Befehl „SET NODE_ENV = Entwicklung & & webpack -d behandeln --color als Zeichen und hängen Sie es in NODE_ENV Variable an. Wenn wir es also als 'Entwicklung' einstellen, wird es tatsächlich als (Entwicklung + Leerzeichen) gesetzt.

Answer 2

Für TFS CI-Build können Sie diese Schritte ausführen, um Ihre Anforderung zu erfüllen.

1. hinzufügen npm Schritt
2. hinzufügen Command Line Schritt

Hinweis: Es gibt -bail Argument, die sonst erforderlich ist, der Schritt/Aufgabe auch erfolgreich sein wird, wenn webpack Befehl wirft Ausnahme.

Sie können auch Variable in Build-Definition hinzufügen (Registerkarte Variable)