MSBuild和Webpack [英] MSBuild and Webpack

问题描述

我在VS2015中开发一个Angular2应用程序，并为其设置了一个webpack捆绑和缩减环境。

这是我的webpack.conf.js

  switch（process.env.NODE_ENV）{case'prod'：case'production '：module.exports = require（'./ config / webpack.prod'）;打破; case'test'：case'testing'：//module.exports = require（'./ config / webpack.test'）;打破; case'dev'：case'development'：default：module.exports = require（'./ config / webpack.dev'）;}  

div>

我也安装了一个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）=='D​​ebug'Command =cmd / c SET NODE_ENV = production&& webpack -p-color> 
< / Exec> 
< / Target> 
  

它失败，错误9009

之后，我尝试从安装webpack的node_modules文件夹启动命令

 < Target Name =AfterBuild> ; 
< Exec Condition =$（Configuration）=='D​​ebug'Command =./ node_modules / .bin cmd / c SET NODE_ENV = production&& webpack -p --color> 
< / Exec> 
< / Target> 
  

仍然无效。即使我得到这个工作，我不知道如果它遇到一个错误在webpack的VS构建失败。

如何处理这个问题？

解决方案

package.json中的脚本，用于开发和生产模式。

添加以下两个脚本'buildDev'和buildProd在package.json中：

 scripts：{
buildDev： SET NODE_ENV = development&& webpack -d --color，
buildProd：SET NODE_ENV = production&& webpack -p --color，
} 
 

在visual studio的AfterBuild事件中添加以下两个条件命令：

 < Target Name =AfterBuild> 
< Exec Condition =$（Configuration）=='D​​ebug'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'：
模块。 exports = require（'./ config / webpack.prod'）; 
 break; 
 case'dev'：
 case'development'：
默认值：
 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）。




I am developing an Angular2 application in VS2015 and have a webpack bundling and minification environment set up for the same.

This is my 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');
}

I have also installed a webpack task runner which invokes this with the following commands

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

and

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

The setup seems to work fine. However, I want to integrate this with my TFS builds CI. The webpack command should fire after the project is built and report a build failure incase the webpack build fails. I have tried to incorporate the following code in my .csproj file

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

It failed with an error 9009

After that I tried, starting the command up from the node_modules folder where webpack was installed

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

still in vain. Even if I get this to work, I am not sure if it would cause the VS build to fail if it encounters an error in webpack.

How do I go ahead with this?

解决方案

Put different scripts in package.json for development and production mode. Then on 'AfterBuild' event of visual studio, call those scripts on different configurations.

Add following two scripts, 'buildDev' and 'buildProd' in package.json:

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

In AfterBuild events of visual studio add these two conditional commands:

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

And finally webpack.conf.js like this:

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

Important Note: Make sure to use trim() function with process.env.NODE_ENV as cmd will treat the blank space in the command "SET NODE_ENV=development && webpack -d --color as character and append it in NODE_ENV variable. So when we are setting it as 'development', it actually gets set as (development + whitespace).

这篇关于MSBuild和Webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！