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

时间:2018-05-21 22:10:31

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

好的,所以在过去的几天里,我一直在试图解决这个问题,看起来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上找到的所有解决方案都不起作用,应该是一个简单的解决方案变得比它更加困难必须是。

有什么想法吗? :\

1 个答案:

答案 0 :(得分:2)

所以,经过大量的谷歌搜索,我认为我有一个不错的解决方案,它将模板中的微软解决方案与我自己的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 dev服务器?如果我继续停止并运行,我会得到大量的Node实例,这些实例可能会让系统陷入困境。