VS2022 TypeScript导入npm模块浏览器报相对引用错误

我在Visual Studio 2022项目中尝试通过TypeScript引用node_modules内的依赖，编译为JavaScript后在浏览器端运行。

安装目标模块的命令：

npm i @microsoft/dotnet-js-interop

TypeScript文件内的导入写法：

import { DotNet } from '@microsoft/dotnet-js-interop'

转译后的JS文件完全保留了原导入语句，未做任何路径转换：

import { DotNet } from '@microsoft/dotnet-js-interop';

浏览器运行时抛出错误：

Uncaught TypeError: Failed to resolve module specifier "@microsoft/dotnet-js-interop". Relative references must start with either "/", "./", or "../".

目前存在的疑问：

• 为什么Visual Studio的TypeScript编译器没有将导入路径转换为浏览器可识别的相对路径？
• 是否存在不需要手动修改导入路径的解决方案？
• 之前尝试在tsconfig.json中配置paths字段映射模块，会提示找不到模块，无法生成对应JS文件。

当前使用的tsconfig.json配置如下：

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "module": "es6",
    "target": "es2015",    
    "moduleResolution": "node",
    "skipLibCheck": true,
    "allowJs": true,
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/*"
  ]
}

首先明确：TypeScript编译器（tsc）从设计上就不会打包依赖、也不会自动改写node_modules的裸模块导入路径，你现在看到的输出是正常行为，和Visual Studio没有关系。
你配置了module: "es6"，tsc会直接输出标准ES模块语法，@microsoft/dotnet-js-interop这种不带路径前缀的裸模块说明符是Node.js生态的模块解析约定，浏览器原生不支持这种写法，必须配合额外配置才能识别。
你之前配置paths字段没用是正常的：paths只在tsc做类型检查、编译时定位模块声明用，既不会修改输出JS里的导入路径，也不会把对应的依赖文件复制到输出目录，完全解决不了运行时的路径解析问题。

根据你的项目规模选一种即可，不需要修改TS源码里的导入写法：

方案1：浏览器原生导入映射（无额外构建，最轻量） #

这是目前现代浏览器原生支持的方案，配置成本最低：

• 先把node_modules/@microsoft/dotnet-js-interop目录下给浏览器用的ES模块版本JS文件，复制到wwwroot/lib/dotnet-js-interop这类你项目存放静态第三方资源的目录
• 在承载你脚本的HTML页面<head>标签内，在引入你自己生成的JS文件之前，加入导入映射配置：

<script type="importmap">
{
  "imports": {
    "@microsoft/dotnet-js-interop": "/lib/dotnet-js-interop/dotnet-js-interop.js"
  }
}
</script>

• 保持现有TS导入写法、tsconfig配置不变，编译后的JS不需要任何修改，浏览器就能正确解析模块路径。
  这个方案兼容Chrome/Edge 89+、Firefox 108+，覆盖目前绝大多数用户使用的浏览器版本。

方案2：接入前端打包工具（多依赖场景推荐） #

如果后续你还要引入更多npm前端依赖，直接加一层打包工具是长期最优解：

• 选Vite、esbuild这类轻量构建工具，Visual Studio 2022本身也支持集成这类前端构建流程
• 把你的TS源码作为构建入口，打包工具会自动递归解析所有裸导入，把依赖文件处理后输出到wwwroot目录，同时自动把所有导入路径改写成浏览器可识别的相对路径
• 只需要把tsconfig里的module配置改成ESNext，不需要额外配置paths字段。

方案3：手动写全相对路径（仅临时调试用，不推荐） #

如果不想加任何额外配置，直接把TS里的导入改成依赖文件在静态目录下的相对路径即可：

// 路径根据你实际存放依赖文件的位置调整，注意必须写.js后缀
import { DotNet } from '../lib/dotnet-js-interop/dotnet-js-interop.js'

这种方式维护成本极高，依赖多了很容易出现路径错误、版本不一致的问题，只适合临时调试用。

不要在tsconfig的paths字段上浪费时间，这个配置完全不影响运行时行为，只服务于TS编译阶段的类型定位，解决不了浏览器端的模块解析问题。

内容的提问来源于stack exchange，提问作者Chris Crowe