MSBuild 和 Webpack

Question

我正在 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 构建失败。

我该如何继续？

Answer 1

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

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

"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) == '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;
}

重要提示：确保将trim()函数与process.env.NODE_ENV一起使用，因为cmd会将命令中的空格视为“SET NODE_ENV=development && webpack -d --color作为字符并追加它在 NODE_ENV 变量中，所以当我们将其设置为“development”时，它实际上被设置为（development +空白）。

Answer 2

对于TFS CI构建，您可以参考以下步骤来实现您的需求。

1. 添加 npm 步骤
2. 添加命令行步骤

注意：有 –bail 参数，这是必需的，否则即使 webpack 命令抛出异常，步骤/任务也会成功。

此外，您可以在构建定义中添加变量（变量选项卡）

Answer 3

@Hemendra 的答案更新。如果您使用 .NET 而不是 .NET Framework

.csproj

，另一种解决方案是：

<Target Name="PostBuild" AfterTargets="PostBuildEvent" Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
  <Exec Command="npm install" />
  <Exec Command="npm run buildDev" />
</Target>

<Target Name="PostBuild" AfterTargets="PostBuildEvent" Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
  <Exec Command="npm install" />
  <Exec Command="npm run buildProd" />
</Target>