如何通过Nuget包实现TypeScript公共代码的跨项目复用？

一、共享类库端配置（打包前调整） #

1. 调整csproj文件避免非C#文件被识别 #

首先在你的共享类库.csproj文件中新增如下配置，禁止C#编译器识别.ts、.d.ts、tsconfig.json等前端文件，同时指定这些文件的打包路径：

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <!-- 开启构建自动生成Nuget包 -->
    <GeneratePackageOnBuild>True</GeneratePackageOnBuild>
    <PackageId>你自定义的包ID</PackageId>
    <PackageVersion>1.0.0</PackageVersion>
    <!-- 配置contentFiles默认属性，消费项目引用时自动复制内容 -->
    <ContentFilesTargetFallback>any</ContentFilesTargetFallback>
    <IncludeContentInPack>True</IncludeContentInPack>
  </PropertyGroup>

  <ItemGroup>
    <!-- 所有前端类文件设置为None，不参与C#编译 -->
    <None Include="**/*.ts;**/*.d.ts;**/*.js;**/tsconfig.json" Pack="true" 
          PackagePath="contentFiles/any/any/$(PackageId)/" 
          CopyToOutputDirectory="PreserveNewest" />
  </ItemGroup>
</Project>

说明：所有TS/JS/配置文件都会被打包到Nuget包的contentFiles/any/any/[包ID]目录下，不会被识别为C#代码，避免编译报错。

2. 调整tsconfig.json确保生成类型声明 #

在共享类库的tsconfig.json中开启声明文件生成，保证消费方可以拿到类型提示：

{
  "compilerOptions": {
    "declaration": true, // 生成.d.ts声明文件
    "outDir": "./dist",
    // 保留你原有其他配置
  }
}

打包后.d.ts和源.ts文件都会被包含在包内，支持消费方自动补全。

二、消费项目端配置 #

1. 自动复制静态资源到统一目录 #

在消费项目的.csproj中新增构建目标，构建时自动将Nuget包内的前端文件复制到wwwroot/lib/[包ID]目录下，避免引用长路径：

<Target Name="CopyTSLibFromNuget" BeforeTargets="Build">
  <ItemGroup>
    <LibFiles Include="$(NuGetPackageRoot)你的包ID/1.0.0/contentFiles/any/any/你的包ID/**/*" />
  </ItemGroup>
  <Copy SourceFiles="@(LibFiles)" 
        DestinationFolder="wwwroot/lib/你的包ID/%(RecursiveDir)" 
        SkipUnchangedFiles="true" />
</Target>

说明：$(NuGetPackageRoot)是MSBuild内置变量，指向本地Nuget缓存根目录，不需要写死用户名路径。

2. 配置类型提示 #

在消费项目的tsconfig.json中新增包含路径，即可获得自动补全能力：

{
  "include": [
    "./src/**/*",
    "./wwwroot/lib/你的包ID/**/*.d.ts",
    "./wwwroot/lib/你的包ID/**/*.ts"
  ]
}

3. 引用方式 #

此时你只需要在HTML中引入统一路径的JS文件即可：

<script src="/lib/你的包ID/dist/xxx.js"></script>

三、可选优化（零配置接入） #

如果需要让消费项目安装包后无需手动配置，可以在共享类库中新增[包ID].targets文件，将上述复制逻辑放到该文件中，打包时将.targets文件放到Nuget包的build目录下，消费项目安装包时会自动导入该目标文件，实现零配置接入。

内容的提问来源于stack exchange，提问作者Mr. TA