嘗試通過 --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\" }'解決方案，但是，如果我返回 go 並刪除所有.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

Answer 1

我終於找到了一個解決方案，雖然它不是我最初尋找的路線。 我放棄了嘗試讓 mocha 對額外的.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 進口感到滿意，否則 Z424516CA53B4AD4BEF837EDA 現在堅持package.json說"type": "module" ：

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

...將fullySpecified設置為false 是解決方案的關鍵。

更新：上面的示例是在一個故意簡單的項目上完成的，對於初學者來說很容易生成帶有 ESM 模塊的 npm package。 現在我正在嘗試一些更高級的東西，我再次遇到了運行單元測試的障礙。 一旦 *.spec.ts 文件直接或間接導入外部代碼，模塊加載就會失敗。 在弄清楚如何解決該問題之前，我只能測試沒有外部依賴項的代碼。 顯然使用"TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}'只是讓我 go 深入解決與 ts-node 一起運行 mocha 的基本問題。