构建 ASP.NET Core 项目时如何自动安装 npm 模块答案

【问题标题】：How to auto install npm modules when I build ASP.NET Core project构建 ASP.NET Core 项目时如何自动安装 npm 模块
【发布时间】：2020-01-01 04:47:27
【问题描述】：

我正在构建一个以 ASP.NET Core Web API 作为后端，以 React SPA 作为前端的项目，文件夹结构如下所示：

WebApiProject
│
├── ClientApp/
│   ├── public/
│   ├── src/
│   └── package.json
│
├── Controller/
├── Models/
├── appsettings.json
├── Program.cs
└── Startup.cs

当我将新的 npm 模块添加到 React 项目（这将更新 package.json）并推送到我们的团队 Git 存储库时，其他团队成员在拉取后必须手动执行 ClientApp 目录中的 npm install新的提交，否则构建过程将由于缺少依赖项而失败。

对于前端开发者来说这很正常，但是对于一些只专注于后端开发的开发者来说，这很麻烦，他们必须做一些额外的过程才能构建项目（他们通常只是ctrl + F5，这很好）。

我尝试了以下方法：

将 nodejs 目录添加到Tools -> Options -> External Web Tools，我以为这会承认 IDE 为我完成这项工作，但似乎没有。
原来的.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\**; $(SpaRoot)build-ssr\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>%(DistFiles.Identity)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

在发布时，它似乎是 ASP.NET 项目的某种自动脚本，但我不太清楚如何调整它以便它在开发模式构建时完成工作。

有没有办法让npm install 的过程单独与 ASP.NET IDE 构建过程一起出现？换句话说，我正在寻找一种在构建 ASP.NET 项目时自动安装 npm 模块的方法。

【问题讨论】：

stackoverflow.com/questions/59115525/…

标签： c# reactjs visual-studio asp.net-core npm

【解决方案1】：

您的配置是正确的，但这仅适用于发布您的项目将其添加到您的 csproj 文件中

 <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- 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." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

这将确保您的项目在启动 ASP.Net Core 项目之前运行 npm install

【讨论】：

谢谢！您认为将npm install 修改为npm ci 以锁定版本会更好吗？虽然我发现npm ci 明显比npm install 慢。不知道为什么。
@BugmanHuang 如果您可以投票支持我的答案，那将对我有很大帮助。谢谢
是的，经过一些修改后它工作了。我删除了And !Exists('$(SpaRoot)node_modules') 代码。由于 node_modules 可能已经存在。

【解决方案2】：

我用过这个...我只是稍微改变一下WorkingDirectory添加ClientApp

<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)ClientApp\node_modules') ">
        <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." />
        
        <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
        
        <Exec WorkingDirectory="$(SpaRoot)ClientApp" Command="npm install" />
    </Target>

【讨论】：