尝试将mocha、ES6模块和ts-node与--test-loader选项一起使用 [英] Trying to use mocha, ES6 modules, and ts-node with the --experimental-loader option

问题描述

我正在尝试让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和巴别尔生成ES5/CommonJS模块。除非我将.js添加到本地打字脚本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就调用我的加载器，然后弄清楚如何操作文件扩展名，但我还没有做到这一点。有什么建议吗？

我使用的是节点v14.15.1。我的项目的完整代码可以在以下位置找到：https://github.com/kshetline/tubular_math

推荐答案

我终于找到了解决方案，尽管它不符合我最初寻找的路线。我放弃了尝试用额外的.js扩展让摩卡感到高兴，并找到了一种方法，在没有它们的情况下让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是解决方案的关键。

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

这篇关于尝试将mocha、ES6模块和ts-node与--test-loader选项一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！