ASP. NET Интеграция Core 3.1 с npm

Question

Я работаю над приложением ASP. NET Core 3.1 и решил использовать npm для управления интерфейсными библиотеками, сейчас их должно быть немного, но это может измениться в будущем.

Я видел несколько похожих вопросов, но все они, кажется, немного устарели:

Как использовать NPM и устанавливать пакеты в Visual Studio 2017?

Как использовать npm с ASP. NET Core

Я намерен использовать npm для установки необходимых библиотек в среде CI, я помните, что вы можете интегрировать npm команды в dotnet и хотели бы знать, возможно ли это / рекомендуется.

Каков рекомендуемый подход для использования npm в этой новой версии ASP. NET Core?

Answer 1

Я предлагаю использовать Пряжа по двум причинам:

• В вашем случае это замена для npm.
• Существующего Пакет Nuget, Yarn.MSBuild , интегрирует Yarn в MSBuild.

Yarn.MSBuild позволяет указать команды Yarn в вашем .csproj. Эти команды запускаются при сборке вашего проекта. Например, для установки пакетов переднего плана в сборку:

1. Добавьте ссылку на Yarn.MSBuild в ваш .csproj:

   <ItemGroup>
     <PackageReference Include="Yarn.MSBuild" Version="*" />
   </ItemGroup>
   

2. Добавьте свойство YarnBuildCommand:

   <PropertyGroup>
     <YarnBuildCommand Condition="'$(Configuration)' == 'Release'">install</YarnBuildCommand>
   </PropertyGroup>
   

В приведенном выше примере yarn install запускается при сборке проекта в конфигурации выпуска. Вы спрашивали конкретно о сборке в CI, используя dotnet - при этой установке, когда вы запускаете dotnet build -c Release в CI, ваши внешние пакеты устанавливаются.

Обратите внимание, что по умолчанию команда выполняется в каталоге .csproj. Вы можете изменить это, добавив свойство YarnWorkingDir:

<PropertyGroup>
  <YarnWorkingDir>$(MSBuildProjectDirectory)/wwwroot/</YarnWorkingDir>
</PropertyGroup>

Answer 2

После некоторых исследований я в конечном итоге использовал свой подход.
Я создал папку Node в своем веб-проекте для хранения всего узла вещей / npm, установил все пакеты оттуда и также добавил gulpfile.js в этом. Я произвел копирование файлов CSS и JS, в которых нуждалась часть процесса сборки, например:

<Target Name="ImportLibsAndStyles" BeforeTargets="Build">
    <Exec WorkingDirectory="./Node" Command="gulp build" />
</Target>

, и я собираюсь выполнить связывание и минимизацию на сервере CI перед развертыванием. Я нашел этот подход проще и с меньшим количеством настроек, если кто-то может улучшить его, они будут очень благодарны. Я не закрываю вопрос в надежде, что все больше людей будут добавлять.

Answer 3

Я работаю с asp. net core 3.0 для API, и я использую реагирование для интерфейса

Вы пытались добавить свой startup.cs

 app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseReactDevelopmentServer(npmScript: "start");
            }
        });

Когда вы запускаете свое решение. net запустит ваш интерфейсный проект

и мой файл .csproj, как этот

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

  <ItemGroup>
    <Folder Include="Migrations\" />
  </ItemGroup>

  <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>

  <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>