含import语句的单个.js文件无法运行，如何在WebStorm中调试ts_config？

我来帮你搞定这个问题！当单个JS文件里存在import xxx from xxx语句时，Node.js默认不支持ES模块语法，再加上要结合tsconfig进行调试，按下面的步骤操作就行：

1. 先解决ES模块运行基础问题 #

要让Node.js识别import语句，有两种简单方式：

• 方式一：通过package.json配置
  在项目根目录创建或修改package.json，添加"type": "module"字段：

  {
    "type": "module"
  }
  

  这样所有.js文件都会被Node.js当作ES模块处理。
• 方式二：修改文件后缀
  把你的JS文件后缀改成.mjs，Node.js会自动将其识别为ES模块，无需修改package.json。

2. 配置WebStorm的Run/Debug调试项 #

接下来在WebStorm里设置调试配置，让它结合你的tsconfig.json运行文件：

• 点击WebStorm右上角的运行配置下拉框，选择Edit Configurations...
• 点击左上角的+号，选择Node.js新建一个配置
• 在Configuration标签页中：
  • JavaScript file：选择你要调试的带import的JS文件（或.mjs文件）
  • 如果你的项目中有tsconfig.json，找到TypeScript区域，勾选Use tsconfig.json，并选择项目中的tsconfig.json文件
  • 如果需要用ts-node来处理TypeScript配置兼容，先确保本地安装了依赖：npm install -D ts-node typescript，然后在Node options中填入对应参数：
    • 针对ES模块：--loader ts-node/esm
    • 针对CommonJS模块（如果用require多一些）：-r ts-node/register

3. 开始调试 #

• 在你的JS文件中需要调试的行号左侧点击，设置断点（出现红色圆点即成功）
• 点击Run/Debug配置旁边的绿色调试按钮（虫子图标），即可启动调试
• 调试过程中可以用WebStorm的调试面板查看变量、单步执行、跳转到定义等，完全适配你的tsconfig配置规则

注意事项 #

• 确保tsconfig.json中的allowJs设为true，这样TypeScript相关工具才会处理JS文件
• 如果遇到模块解析错误，检查tsconfig.json的moduleResolution字段：ES模块推荐用NodeNext或Node16，CommonJS用Node

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