TypeScript编译时模块导入需手动添加.js扩展名问题求助

问题根源 #

Node.js 的 ES 模块规范要求所有相对导入必须携带完整文件扩展名（如 .js），但默认配置下 TypeScript 编译时不会自动为相对导入添加 .js 扩展名，导致编译后的 JS 文件中仍保留无扩展名的导入路径（如 ./addTodo），而实际编译产物是 addTodo.js，因此 Node 无法找到对应模块。

解决方案 #

方案一：使用 TypeScript 的 NodeNext/Node16 模块模式（推荐） #

该模式是 TypeScript 为适配 Node.js ES 模块设计的，会自动处理导入扩展名，无需手动修改代码。

1. 修改 tsconfig.json：
   将 module 和 moduleResolution 配置改为 NodeNext（或 Node16，两者行为一致）：

   {
       "compileOnSave": true,
       "compilerOptions": {
         "baseUrl": "./",
         "outDir": "./dist",
         "moduleResolution": "NodeNext",
         "importHelpers": true,
         "target": "ESNext",
         "module": "NodeNext",
         "lib": [
           "ES6",
           "dom",
           "ESNext"
         ],
         "allowSyntheticDefaultImports": true,
         "noUnusedParameters": false
       },
       "exclude": ["node_modules", "**/node_modules/*"]
   }
   

2. 简化启动脚本：
   由于 NodeNext 模式生成的代码已符合 ES 模块规范，无需再使用实验性参数。修改 package.json 的 start 脚本：

   "scripts": {
       "start": "nodemon dist/index.js",
       "build": "tsc --watch && npm run start",
       "test": "echo \"Error: no test specified\" && exit 1"
   }
   

方案二：使用 tsc-alias 自动补全扩展名（兼容旧版配置） #

如果不想修改模块模式，可借助 tsc-alias 工具在编译后自动补全导入路径的扩展名。

1. 安装依赖：

   npm install tsc-alias --save-dev
   

2. 修改构建脚本：
   更新 package.json 的 build 脚本，让编译后自动执行 tsc-alias 监听模式：

   "scripts": {
       "start": "nodemon node --es-module-specifier-resolution=node --experimental-modules dist/index.js",
       "build": "tsc --watch && tsc-alias -w",
       "test": "echo \"Error: no test specified\" && exit 1"
   }
   

3. 可选：配置 TypeScript 路径别名
   在 tsconfig.json 中添加 paths 配置，让 TypeScript 编辑器识别无扩展名的导入：

   "compilerOptions": {
     // ...其他配置
     "paths": {
       "*": ["*", "*.js"]
     }
   }
   

验证 #

完成配置后，重新执行 npm run build，编译后的 JS 文件中相对导入会自动带上 .js 扩展名，无需手动修改即可正常运行。

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