使用 .NET Framework 发布时如何复制 webpack 构建

如何解决使用 .NET Framework 发布时如何复制 webpack 构建

我有一个使用 ASP.NET MVC/WebAPI、在 .NET Framework 上运行并发布到 Azure 云服务的旧项目。我正在尝试迁移到 React 并希望避免将 webpack 构建添加为 .csproj 上的文件。我设法获得了运行 npm run build 以生成输出的构建步骤，但是当我尝试发布时，构建的文件没有添加到已发布的包中。

在 .NET 5 应用程序中，当您使用 React/SPA 模板时，.csproj 文件具有如下内容：

    <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
        <!-- As part of publishing,ensure the JS resources are freshly built in production mode -->
        <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
        <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

        <!-- Include the newly-built files in the publish output -->
        <ItemGroup>
            <distFiles Include="$(SpaRoot)build\**" />
            <ResolvedFiletoPublish Include="@(distFiles->'%(FullPath)')" Exclude="@(ResolvedFiletoPublish)">
                <RelativePath>%(distFiles.Identity)</RelativePath>
                <copyToPublishDirectory>PreserveNewest</copyToPublishDirectory>
                <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
            </ResolvedFiletoPublish>
        </ItemGroup>
    </Target>

我想我明白这是做什么的，但我在想出一个适用于 .NET Framework 的模拟时遇到了麻烦。当我像这样运行它时，命令甚至不运行。我猜这些旧式项目不会调用 ComputeFilesToPublish 目标。我尝试使用 BeforeTargets 和 AfterTargets 的 Build 和 Publish 运行它，当我这样做时，我可以从日志中看到 npm install 和正在调用 npm run build，但文件不会复制到发布目录（在本例中为 csx）。

我可以在 .csproj 中做什么才能将我的构建文件拉入发布包？

解决方法

问题在于 .NET 5 Azure Web 应用程序的构建目标与 .NET Framework Azure 云服务不同。这是我需要的秘方：

  <Target Name="BuildRunWebpack" BeforeTargets="BeforeBuild">
    <Message Importance="normal" Text="Running npm install as a Pre-build step" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Message Importance="normal" Text="Running npm run build (compile webpack) as a Pre-Build step" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
  </Target>
  <Target Name="PublishRunWebpack" BeforeTargets="CollectFilesFromContent">
    <!--On publish,this will pull any files in the ClientApp\dist folder that were built by webpack. These files need to be in the published package.-->
    <Message Importance="normal" Text="Collecting webpack bundle for publish" />
    <ItemGroup>
      <Content Include="$(SpaRoot)dist\**" />
    </ItemGroup>
  </Target>