如何在Node.js的JS/TS混合项目中调试JS导入TS的代码？

问题背景 #

大型Node.js纯JS项目中引入TypeScript开发，仅用tsc编译无打包工具。入口文件app.js导入module1.ts后代码可正常运行，但无法在VS Code中进行实时调试，尝试三种导入方式均报错：

报错情况 #

• 使用const q = require('./module1');时，报错：

  error Exception has occurred: Error: Cannot find module './module1'
  

• 使用const q = require('./module1.ts');时，报错：

  Exception has occurred: ...\module1.ts:1
  export default () => {
  ^^^^^^
  

• 使用import q from './module1';时，报错：

  (node:1092) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
  import q from './module1';
  ^^^^^^
  

当前tsconfig.json配置 #

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./build",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

可行调试方案 #

1. 修正导入路径，指向编译后的JS文件 #

Node无法直接解析TypeScript文件，必须导入tsc编译后的产物。你的tsconfig中outDir设为./build，所以module1.ts编译后会生成build/module1.js，修改app.js中的导入语句为：

const q = require('./build/module1');

这样既符合CommonJS模块规范，也能让Node找到对应模块。

2. 配置VS Code调试文件（launch.json） #

在项目根目录的.vscode文件夹下创建launch.json，配置调试器关联源码与编译产物：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.js",
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/build/**/*.js"],
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

• sourceMaps: true：开启源码映射，调试器会通过编译时生成的.map文件关联TS源码
• outFiles：指定编译后JS文件的位置，确保调试器能找到对应的映射文件

3. 自动监听TS文件变化并编译 #

执行tsc --watch命令，让tsc实时监听TS文件修改并自动编译，这样调试时始终使用最新的编译产物，无需手动执行tsc。

4. 避免直接导入.ts后缀文件 #

无论是require还是import，都不要直接导入.ts后缀的文件——Node本身不支持解析TS语法，必然会出现语法错误或模块找不到的问题。

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