asp.net - ASP.NET SPA 将 TypeScript 转换为 JavaScript 文件

Question

我目前正在使用 ASP.NET spa 和 Vue.js 创建一个项目。我从 Vue.js 客户端应用静态地提供 dist 文件夹，这是客户端应用 /src 编译的结果（所有 .Vue 文件和 .ts 文件都在其中）。我目前正在使用以下代码作为 startup.cs 的设置：

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public static void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();
        services.AddSpaStaticFiles(configuration => configuration.RootPath = "ClientApp/dist");
        services.AddMvc();

        // Add Singletons for the providers
        services.AddSingleton<IActionDescriptorChangeProvider>(ControllerChangeProvider.Instance);
        services.AddSingleton(ControllerChangeProvider.Instance);

    }

    public static void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseRouting();
        app.UseSpaStaticFiles();
        app.UseAuthorization();
        app.UseEndpoints(endpoints => endpoints.MapControllers());
        app.UseSpa(spa => { });
    }
}

.csproj：

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <RootNamespace>MyApplication</RootNamespace>
    <Nullable>enable</Nullable>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.CodeAnalysis" Version="3.5.0" />
    <PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="3.0.0">
      <PrivateAssets>all</PrivateAssets>
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>
    <PackageReference Include="Microsoft.CSharp" Version="4.7.0" />
    <PackageReference Include="System.Text.Json" Version="4.7.1" />
    <PackageReference Include="VueCliMiddleware" Version="3.0.0" />
  </ItemGroup>

</Project>

现在，我的 /src 中有一些 TypeScript 文件（例如 /router/index.ts），它们在 dist 文件夹上运行静态服务器（例如使用 npm）时工作正常。但是，由于某种原因，当我使用 ISS 运行 ASP.NET 服务器时，它会将 .ts 文件转换为 /src 文件夹中的 .js 文件。这不会影响任何事情，但它是不必要的代码。

我在应用程序的一开始就使用断点运行我的应用程序（main 方法），并且转译发生在 main 方法之前。所以我认为这是一个配置。

所以我的问题是，有没有一个选项可以在 asp.net 中关闭 .ts 文件的转换？

欢迎任何反馈，我会在需要时提供任何必要的信息。:)

标签： asp.netasp.net-mvctypescriptvue.jssingle-page-application

Answer 1

出于某种原因，我没有 Vue 模板，所以我使用了 React 模板——步骤应该是一样的。

asp.net core 的构建过程在您的.csproj文件中连接在一起。在构建应用程序时，从中删除以下部分，以禁用 spa 的自动构建。

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

第一部分确保 NodeJs 已实际安装，而第二部分则调用 npm 脚本。