如何在 VS Code 中调试 Mocha + Typescript + ESM

我正在尝试弄清楚如何设置 VS Code 以在 TypeScript 模块 npm 项目中调试 mocha 测试。

• 带有 ts-node 和 ESM 支持的打字稿
• mocha-breakpoints-using-visual-studio-code

当我结合这些解决方案时，我碰壁了：

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for C:\Users\peter\Projects\TEMP\node_modules\mocha\bin\_mocha
    at new NodeError (node:internal/errors:400:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:74:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:114:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:161:28)
    at C:\Users\peter\Projects\TEMP\node_modules\ts-node\src\esm.ts:255:45
    at async addShortCircuitFlag (C:\Users\peter\Projects\TEMP\node_modules\ts-node\src\esm.ts:409:15)
    at async nextLoad (node:internal/modules/esm/loader:161:22)
    at async ESMLoader.load (node:internal/modules/esm/loader:596:20)
    at async ESMLoader.moduleProvider (node:internal/modules/esm/loader:448:11) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

当设置

\node_modules\mocha\bin\_mocha

experimental-specifier-resolution=node

解决方法是从

--experimental-specifier-resolution=node

runtimeArgs

launch.json

.js

我的环境

• 节点：v19.3.0
• npm：9.2.0

文件

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Mocha",
            "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
            "args": [
                "--no-timeouts",
                "--colors",
                "--inspect-brk",
                "*.test.ts"
            ],
            "runtimeArgs": [
                "--experimental-specifier-resolution=node",
                "--loader", "ts-node/esm"
            ]
        }
    ]
}

package.json

{
  "type": "module",
  "scripts": {
    "test": "mocha --node-option loader=ts-node/esm --node-option experimental-specifier-resolution=node *.test.ts"
  },
  "devDependencies": {
    "@types/chai": "^4.3.5",
    "@types/mocha": "^10.0.1",
    "chai": "^4.3.7",
    "mocha": "^10.2.0",
    "ts-node": "^10.9.1",
    "tslib": "^2.5.0",
    "typescript": "^5.0.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "types": ["mocha", "node" ],
    "typeRoots": [ "./node_modules/@types" ],
    "module": "ESNext",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
  ]
}

项目.ts

export const TRUE = true;

项目.test.ts

import { assert } from "chai"
import { TRUE } from "./project"

describe("project", () => {
    it("TRUE === true", () => {
        assert.isTrue(TRUE);
    })
})

更新 1

一些谷歌搜索让我make experimental-specifier-resolution=node support extension-less files

我已经尝试添加一个自定义加载器（loader.mjs）并提交给回购：

let is_main = true;

export const load = (url, context, loadNext) => {
    if (is_main) {
        is_main = false;
        if (!context.format) {
            context.format = "commonjs";
        }
    }
    return loadNext(url, context, loadNext);
};

现在我有一个新的错误：

Error: Failed to load raw source: Format was 'null' and url was 'file:///C:/Users/peter/Projects/TEMP/node_modules/mocha/bin/_mocha''.
    at C:\Users\peter\Projects\TEMP\node_modules\ts-node\src\esm.ts:265:17
    at async addShortCircuitFlag (C:\Users\peter\Projects\TEMP\node_modules\ts-node\src\esm.ts:409:15)
    at async nextLoad (node:internal/modules/esm/loader:161:22)
    at async ESMLoader.load (node:internal/modules/esm/loader:596:20)
    at async ESMLoader.moduleProvider (node:internal/modules/esm/loader:448:11)
    at async link (node:internal/modules/esm/module_job:68:21)

我已经使用

console.log

./loader.js

format

node_modules/mocha/bin/_mocha

我意识到我可以比

console.log