MSBuildとWebpack

Question

私はVS2015でAngular2アプリケーションを開発しており、同じようにWebpackバンドルとミニ化環境を設定しています。

この私は、以下のコマンドでこれを呼び出す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'); 
 
}

ある

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

と

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

セットアップがうまくいくようです。しかし、これを私のTFSビルドCIと統合したい。 webpackコマンドは、プロジェクトがビルドされた後に起動し、webpackビルドに失敗した場合にビルドエラーを報告します。私はそれが私がWebPACKのがインストールされたnode_modulesフォルダからコマンドを起動し、しようとした後にエラーで9009

を失敗した

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

私.csprojファイルに次のコードを組み込むことを試みた

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

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

どうすればいいですか？

Answer 1

開発モードと本番モード用に異なるスクリプトをpackage.jsonに入れてください。次に、ビジュアルスタジオのAfterBuildイベントで、異なる設定でそれらのスクリプトを呼び出します。

2つのスクリプト、 'buildDev'と 'buildProd' package.jsonに次の

追加：Visual StudioののAfterBuildイベントで

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

が追加これら二つの条件付きのコマンド：

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

重要な注意： CMDとしてprocess.env.NODE_ENVで確認使用するトリム（）関数を作成するコマンドに空白を扱います「SET NODE_ENV =開発& & WebPACKの-d --colorを文字として使用し、NODE_ENV変数に追加します。だから私たちは '開発'としてそれを設定すると、（開発+空白）と実際に設定されます。

Answer 2

TFS CIビルドでは、要件を満たすためにこれらの手順を参照することができます。

1. は、コマンドラインのステップ

メモの追加NPMステップ

を追加：ステップ/タスクはWebPACKのコマンドはスローにもかかわらず、成功になりそう必要とされる-bail引数があり、例外。

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