在 .NET CORE 构建过程中运行 Webpack-Dev-Server答案

【问题标题】：Run Webpack-Dev-Server in .NET CORE Build Process在 .NET CORE 构建过程中运行 Webpack-Dev-Server
【发布时间】：2018-10-31 14:29:49
【问题描述】：

好的，所以在过去的几天里，我一直在努力解决这个问题，似乎 Visual Studio 让这种方式变得比它需要的更难。

我希望我的 .NET CORE 应用程序在调试时在 webpack-dev-server 上运行我的 Vue.js 应用程序，否则构建生产版本并将其放入它输出的文件结构中......你会认为我可以像这样添加一个 Post-Build 事件：

if $(ConfigurationName) == 'Debug' {
    npm run dev
}

但是一旦它进入 webpack 进程，IIS 服务器构建就永远不会继续，它只会在 webpack 服务器说它正在运行之后永远挂起。我假设是因为没有什么可以告诉 Visual Studio 该过程已完成？如果我运行 npm run build 来构建默认的生产构建，则会发生同样的事情。停止构建的唯一方法是在单独的终端实例中使用 taskkill /F /IM node.exe 终止所有 Node 实例。

我可以在 Visual Studio 之外很好地运行这些命令并且它们运行良好，但是将它们插入到 VS 构建过程中根本不起作用。

或者，我尝试加载 .NET CORE Vue.js 模板并复制其功能以在 .csproj 文件中构建应用程序并对其进行编辑以满足我的需要：

  <Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
        <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />

    <!-- In development, the dist files won't exist on the first run or when cloning to
        a different machine, so rebuild them if not already present. -->
    <Message Importance="high" Text="Running dev server..." />
    <Exec Command="node node_modules/webpack/bin/webpack.js" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec Command="npm install" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
        <DistFiles Include="wwwroot\js\**" />
        <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
            <RelativePath>%(DistFiles.Identity)</RelativePath>
            <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

这会正确构建文件（与npm run build 基本相同），但从未运行任何开发服务器。

必须有一种更简单的方法来使用预先构建的 NPM 命令来完成这项工作，但是我在 StackOverflow 上找到的所有解决方案都不起作用，而且应该是一个简单的解决方案变得比它更难必须的。

有什么想法吗？ :\

【问题讨论】：

标签： node.js visual-studio webpack asp.net-core vue.js

【解决方案1】：

所以，经过大量的谷歌搜索，我认为我有一个不错的解决方案，它将微软在他们的模板中的解决方案与我自己的 NPM 脚本相结合：

<Target Name="RunWebpackServer" AfterTargets="Publish" Condition=" '$(Configuration)' == 'Debug' ">
    <!-- Check if Node.js / NPM is installed -->
        <Exec Command="node --version" ContinueOnError="false">
            <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
        </Exec>

    <!-- If there's an error, tell the user to install Node -->
        <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />

    <!-- Clean cache, install packages and run the dev server -->
        <Message Importance="high" Text="Cleaning NPM Cache..." />
        <Exec Command="npm cache clean" />
        <Message Importance="high" Text="Installing NPM Packages..." />
        <Exec Command="npm install" />
        <Message Importance="high" Text="Running Webpack Dev Server..." />
        <Exec Command="npm run dev" />
</Target>

现在，有谁知道当 Debug 停止时如何关闭 Node 开发服务器？如果我继续停止并运行，我会得到大量的 Node 实例，这些实例会真正使系统陷入困境。

【讨论】：