TypeScript模块编译后导入缺失.js扩展名，浏览器无法识别模块求助

这是TypeScript配合浏览器原生ES模块时非常常见的问题，核心原因是浏览器的ES模块要求导入路径必须包含完整的文件扩展名，但默认的TS编译配置不会自动给相对导入添加.js后缀。下面是几种简单有效的解决方案：

方法一：使用Node16/Nodenext模块解析模式（推荐） #

修改你的tsconfig.json配置，让TypeScript按照Node.js的ES模块规则编译，这样它会自动为相对路径的导入添加.js后缀：

{
  "compilerOptions": {
    "target": "ES2020", // 确保目标环境支持ES模块
    "module": "Node16", // 或"Nodenext"，启用Node风格的ES模块处理
    "moduleResolution": "Node16", // 和module字段保持一致
    "outDir": "./dist", // 指定编译输出目录，避免源文件和编译文件混在一起
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["*.ts"] // 包含需要编译的TS文件
}

配置完成后重新运行tsc编译，生成的app.js里的导入语句就会变成：

import {ModuleA} from './ModuleA.js';

这时浏览器就能正确找到ModuleA.js模块了。

为什么这个配置有效？ #

在Node16模块解析模式下，TypeScript会区分ES模块和CommonJS模块的导入规则：对于相对路径的ES模块导入，它会自动在编译后的代码中补充.js扩展名，完美匹配浏览器的ES模块要求。

额外注意事项 #

• 确保你的HTML文件中引用的是编译后的文件，比如：<script type="module" src="dist/app.js"></script>
• 所有TS模块文件（比如ModuleA.ts）都会被编译到dist目录下，保持和源文件相同的目录结构，这样相对路径才能正确对应。

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