Windows系统下如何在VSCode调试器中运行Flood Element(NodeJS)演示脚本？

问题背景 #

在Windows 10系统上使用Flood Element开发本地性能测试脚本：

• 已按官网指引完成安装，element init和element generate生成的基础脚本可在命令行正常运行
• 配置VSCode的launch.json后调试时出现两类错误：
  1. 使用项目内@flood/element-cli/dist/bin/element.js路径，报错Cannot find module 'faker/index.js'
  2. 使用全局element-cli/bin/element.ts路径，报错无法在模块外部使用'import'

原launch.json配置：

{
"version": "0.2.0",
"configurations": [
    {
        "name": "debug Element - docs",
        "type": "node",
        "request": "launch",
        "args": [
            "${workspaceRoot}/node_modules/@flood/element-cli/dist/bin/element.js",
            "run",
            "./element-basic-project.perf.ts", //path to your test script
            "--debug"
        ]
    }
]
}

对应错误信息：

C:\Users\ievans\AppData\Roaming\npm\node.cmd C:\git\element-basic-project/node_modules/@flood/element-cli/dist/bin/element.js run ./element-basic-project.perf.ts --debug

Debugger attached.
Waiting for the debugger to disconnect...

node:internal/modules/cjs/loader:433
  throw err;
  ^

Error: Cannot find module 'C:\git\element-basic-project\node_modules\faker\index.js'. Please verify that the package.json has a valid "main" entry
at tryPackage (node:internal/modules/cjs/loader:425:19)
at Function.Module._findPath (node:internal/modules/cjs/loader:638:18)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1012:27)
at Function.Module._load (node:internal/modules/cjs/loader:871:27)
at Module.require (node:internal/modules/cjs/loader:1098:19)
at require (node:internal/modules/cjs/helpers:108:18)

解决步骤 #

1. 修复faker模块依赖问题 #

报错原因是新版本faker的入口文件路径变更，原index.js已不存在：

• 打开项目根目录的package.json，将faker依赖版本锁定为^5.5.3（该版本保留了传统的入口路径）
• 执行命令重新安装依赖：

npm install

2. 调整VSCode调试配置 #

避免直接调用element的JS/TS文件，改用npm脚本间接启动，确保依赖加载正确：

更新launch.json配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Flood Element",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "debug"],
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

在package.json中添加debug脚本：

{
  "scripts": {
    "debug": "element run ./element-basic-project.perf.ts --debug"
  }
}

3. 解决ES模块导入错误 #

若直接调试TS文件出现import语法错误，需确保项目的TS配置正确：

• 确认项目根目录存在tsconfig.json（初始化Flood Element时自动生成），核心配置如下：

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true
  }
}

• 禁止直接调试element.ts，始终通过编译后的JS文件或npm脚本启动调试

4. 验证调试 #

完成以上配置后，在VSCode中启动调试，即可正常加载依赖并调试Flood Element脚本。

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