node.js - 尝试通过 --experimental-loader 选项使用 mocha、ES6 模块和 ts-node

Question

我试图让 ts-node 选项 --experimental-loader 与 mocha 一起工作，但没有成功。在我开始尝试编译 ES6 模块之前，我曾经能够以这种方式运行 mocha 测试:

"test": "nyc --reporter=html mocha --require ts-node/register src/**/*.spec.ts"

这在生成 ES6 模块时不再起作用。

我会使用 TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' 解决方案进行测试，但这对我不起作用，因为另一个复杂问题:我我构建的第一步是生成 ES6 模块，但也使用 webpack 和 babel 生成 ES5/CommonJS 模块。除非我将 .js 添加到本地 TypeScript import 语句的末尾，否则最后一步不起作用。

但添加那些 .js 扩展结果会破坏 TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' 解决方案，它将起作用，但是，如果我返回并删除所有 .js 扩展名。我显然不想要一个测试和构建过程，在这个过程中我必须在添加和删除这些扩展之间来回切换。

现在为了简化，我取出了 nyc，并尝试运行这样的测试:

mocha -r ts-node/register --experimental-loader ./ts-loader.mjs src/**/*.spec.ts

这样我没有得到任何错误，但也没有任何反应。就像 src/**/*.spec.ts 不存在一样。

我的(目前)什么都不做的虚拟加载器看起来像这样:

console.log('ts-loader loaded');

export async function resolve(specifier, context, defaultResolve) {
  console.log('resolve');
  return defaultResolve(specifier, context, defaultResolve);
}

export async function getFormat(url, context, defaultGetFormat) {
  console.log('getFormat');
  return defaultGetFormat(url, context, defaultGetFormat);
}

export async function getSource(url, context, defaultGetSource) {
  console.log('getSource');
  return defaultGetSource(url, context, defaultGetSource);
}

export async function transformSource(source, context, defaultTransformSource) {
  console.log('transformSource');
  return defaultTransformSource(source, context, defaultTransformSource);
}

export function getGlobalPreloadCode() {
  console.log('getGlobalPreloadCode');
  return '';
}

我可以看出它已加载，因为出现了 'ts-loader loaded' 消息，但从未调用过任何函数。

我已经尝试了其他排列，但只是得到像 src/**/*.spec.ts 被视为文字文件名而不是 glob 的错误，或者有关模块未被处理的错误找到了。

我希望看到我的加载程序在处理每个 import 时被调用，然后弄清楚如何操作文件扩展名，但我还没有设法做到这一点。有什么建议吗？

我正在使用 Node v14.15.1。可以在此处找到我的项目的完整代码，构建工作正常，但测试失败:https://github.com/kshetline/tubular_math

Answer 1

我终于找到了解决方案，尽管它与我最初寻找的路线不同。我放弃了使用额外的 .js 扩展来让 mocha 满意的尝试，并找到了一种方法来让 webpack 在没有它们的情况下也满意。所以……

import { Angle, Mode, Unit } from './angle.js';

...回到...

import { Angle, Mode, Unit } from './angle';

我的测试脚本是这样的:

  "scripts": {
    "build": "rimraf dist/ && tsc && webpack && webpack --env target=umd",
    "prepublishOnly": "npm run build",
    "lint": "eslint 'src/**/*.ts'",
    "test": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' nyc --reporter=html mocha --require ts-node/register src/**/*.spec.ts"
  },

最后，最重要的是，我想出了如何让 webpack 5.x(4.x 没有这个问题)对没有 .js 的本地 JavaScript 导入感到满意扩展，如果你的 package.json 说 "type": "module":

，webpack 现在会坚持使用它

    module: {
      rules: [
        { test: /\.js$/, use: 'babel-loader', resolve: { fullySpecified: false } }
      ]
    }

...将 fullySpecified 设置为 false 是解决方案的关键。

更新:上面的例子是在一个特意简单的项目上完成的，对于初学者来说很容易生成带有 ESM 模块的 npm 包。现在我正在尝试一些更高级的东西，我在运行单元测试时再次遇到了障碍。一旦 *.spec.ts 文件直接或间接导入外部代码，模块加载就会失败。在弄清楚如何解决该问题之前，我只能测试没有外部依赖项的代码。显然使用 "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' 只是让我更深入地解决运行 mocha 和 ts-node 的基本问题。