web-dev-qa-db-ja.com

MSBuildとWebpack

私はVS2015でAngular2アプリケーションを開発しており、同じためにwebpackバンドルとミニファイ環境をセットアップしています。

これは私の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');
}

次のコマンドでこれを呼び出すwebpackタスクランナーもインストールしました

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

そして

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

セットアップは正常に動作するようです。ただし、これをTFSビルドCIと統合したいと考えています。プロジェクトがビルドされた後、webpackコマンドが起動し、webpackのビルドが失敗した場合にビルドの失敗を報告します。 .csprojファイルに次のコードを組み込もうとしました

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

エラー9009で失敗しました

その後、試しに、webpackがインストールされているnode_modulesフォルダからコマンドを起動しました

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

まだ無駄です。これが機能しても、webpackでエラーが発生した場合にVSビルドが失敗するかどうかはわかりません。

これをどうやって進めますか？

msbuildwebpackcontinuous-integrationtfsbuildmsbuild-task
11
lohiarahul

開発モードと本番モード用にさまざまなスクリプトをpackage.jsonに配置します。次に、ビジュアルスタジオの「AfterBuild」イベントで、さまざまな構成でこれらのスクリプトを呼び出します。

次の2つのスクリプト'buildDev'および'buildProd'をpackage.jsonに追加します。

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

Visual StudioのAfterBuildイベントで、次の2つの条件コマンドを追加します。

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

そして最後に、このようなwebpack.conf.js：

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

重要な注意：必ずprocess.env.NODE_ENVでtrim（）関数を使用して、cmdがコマンドの空白スペース"SET NODE_ENV = development && webpack -d --color/を文字として追加し、NODE_ENV変数に追加します。したがって、「development」として設定します、実際には（development + whitespace）として設定されます。

17
Hemendra

TFS CIビルドの場合、これらの手順を参照して要件を達成できます。

  1. Npmステップを追加 enter image description here
  2. コマンドラインステップの追加 enter image description here

注：–bail引数があります。これは必須です。それ以外の場合、webpackコマンドが例外をスローしてもステップ/タスクは成功します。

また、ビルド定義に変数を追加することもできます（変数タブ）

3
starian chen-MSFT