Frage MSBuild und Webpack


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

Das ist meine 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 einen Webpack-Task-Runner installiert, der dies mit den folgenden Befehlen aufruft

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 meine .csproj-Datei zu integrieren

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

Es ist mit einem Fehler 9009 fehlgeschlagen

Danach habe ich versucht, den Befehl aus dem Ordner node_modules zu starten, in dem 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>

immer noch vergebens. 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 vor?


7
2017-12-06 11:03


Ursprung


Antworten:


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

Fügen Sie folgende zwei Skripts hinzu: 'buildDev' und "bauenProd" in Paket.json:

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

Fügen Sie in AfterBuild-Ereignissen von Visual Studio diese beiden bedingten Befehle hinzu:

<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 so:

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;
}

Wichtige Notiz: Stellen Sie sicher, dass Verwenden Sie die Funktion trim () mit process.env.NODE_ENV als cmd behandelt das Leerzeichen im Befehl "SET NODE_ENV = Entwicklung && webpack -d --color als Zeichen und hängen Sie es an die Variable NODE_ENV an. Wenn wir es also als 'Entwicklung' definieren, wird es tatsächlich als gesetzt (Entwicklung + Leerzeichen).


12
2017-12-07 08:23



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

  1. Npm Schritt hinzufügen enter image description here
  2. Fügen Sie den Befehlszeilenschritt hinzu enter image description here

Hinweis: Es gibt das Argument -bail, das erforderlich ist, andernfalls ist der Schritt / Task erfolgreich, obwohl der Befehl webpack die Ausnahme auslöst.

Außerdem können Sie eine Variable in der Build-Definition hinzufügen (Registerkarte "Variable").


2
2017-12-07 09:04