MSBuild 和 Webpack [英] MSBuild and Webpack

问题描述

我正在 VS2015 中开发一个 Angular2 应用程序，并为此设置了一个 webpack 捆绑和缩小环境.

这是我的 webpack.conf.js

switch (process.env.NODE_ENV) {案例产品":案例生产":module.exports = require('./config/webpack.prod');休息;案例测试":案例测试"://module.exports = require('./config/webpack.test');休息;案例开发":案例发展":默认: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"></执行></目标>

失败并出现错误 9009

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

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

仍然是徒劳的.即使我让它工作，我不确定如果在 webpack 中遇到错误是否会导致 VS 构建失败.

我该怎么做?

解决方案

将不同的脚本放在package.json中，用于开发和生产模式.然后在 Visual Studio 的AfterBuild"事件中，在不同的配置上调用这些脚本.

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

脚本":{"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) == 'Debug'" Command="npm run buildDev"/><Exec Condition="$(Configuration) == 'Release'" Command="npm run buildProd"/></目标>

最后是这样的 webpack.conf.js:

switch (process.env.NODE_ENV.trim()) {案例产品":案例生产":module.exports = require('./config/webpack.prod');休息;案例开发":案例发展":默认:module.exports = require('./config/webpack.dev');休息;}

<块引用>

重要提示:确保将 trim() 函数与 process.env.NODE_ENV 一起使用，因为 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屋！