karma-typescript 被 .d.ts 打字混淆为无法绑定到 npm 包代码

Question

我正在使用 package.json 将 npm 包导入到我的项目中：

{
  // ...
  "browser": "dist/umd/index.js",
  "main": "dist/cjs/index.js",
  "module": "dist/fesm2015/index.mjs",
  "esm2015": "dist/index.js",
  "fesm2015": "dist/fesm2015/index.mjs",
  "typings": "dist/index",
  "sideEffects": false,
  "exports": {
    "node": {
      "module": "./dist/fesm2015/index.mjs",
      "require": "./dist/cjs/index.js"
    },
    "browser": {
      "module": "./dist/fesm2015/index.mjs",
      "default": "./dist/umd/index.js"
    },
    "default": "./dist/cjs/index.js"
  },
  // ...
}

（我真的，真的很想在上面的包中加入 "type": "module"，但这创造了一个试图让业力和其他工具快乐的痛苦世界。）

我可以很好地构建和运行我使用上述 npm 包的项目，而且我可以运行在 karma 之外进行 mocha 单元测试，没有任何问题。然而，当运行ning 在 karma 下时，我得到这样的错误：

20 06 2021 10:58:05.127:INFO [Chrome 91.0.4472.106 (Mac OS 10.15.7)]: Connected on socket 9qHeabxqGGw_tCrRAAAB with id 99567255
Chrome 91.0.4472.106 (Mac OS 10.15.7) @tubular/util should blend colors correctly FAILED
        TypeError: math_1.round is not a function
            at colorFromRGB (src/browser-graphics-util.js:2:2895)
            at Object.blendColors (src/browser-graphics-util.js:2:1803)
            at Context.<anonymous> (src/index.spec.js:60:45)
Chrome 91.0.4472.106 (Mac OS 10.15.7): Executed 30 of 30 (1 FAILED) (0.818 secs / 0.789 secs)
TOTAL: 1 FAILED, 29 SUCCESS

我的项目代码似乎没有正确绑定到导入的 npm 包中的代码，所有依赖于该包代码的测试都失败了。

如果我对我的 node_modules 目录的内容进行一点手动手术，并通过删除 "typings": "dist/index" 修改导入的 npm 包的 package.json，业力再次快乐，我的所有测试都成功了。

为什么，为什么看在你的选择的份上，类型的存在对 karma-typescript 关于绑定到 npm 包中代码的成功或失败有什么影响吗？

我绝对希望那个包（这是我在另一个项目中创建的包）提供 TypeScript 打字，所以永久摆脱打字不是一个选项。我如何告诉 karma 或 karma-typescript 忽略这些类型，或者根本不被它们弄糊涂？

这是我现在的 karma.conf.js:

module.exports = function (config) {
  config.set({
    frameworks: ['chai', 'karma-typescript', 'mocha'],
    files: [
      'src/**/*.ts'
    ],
    preprocessors: {
      'src/**/*.ts': 'karma-typescript'
    },
    reporters: ['progress', 'karma-typescript'],
    browsers: ['Chrome'],
    karmaTypescriptConfig: {
      tsconfig: './tsconfig.karma.json'
    },
  });
};

和tsconfig.karma.json，它的存在只是为了让 karma 构建 CommonJS 模块而不是 ESM 模块：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2015"
  },
  "exclude": [
    "dist",
    "node_modules"
  ]
}

更新：

关于这个问题的另一点信息。如果我使用这样的显式导入：

import { max, min, round } from '../node_modules/@tubular/math/dist/cjs';

...而不是：

import { max, min, round } from '@tubular/math';

...问题消失，确认这是模块解析问题。

那么，在使用 karma-typescript 在 karma 中运行时，模块分辨率发生了什么变化？是否有我可以用来调整模块分辨率的设置？

Answer 1

我想通了。

karma-typescript 依赖于 browser-resolve，而我导入的 package.json 有一个 "browser" 条目，但目的有所不同，显然根本不兼容karma-typescript 如何使用 browser-resolve.

只要把我的"browser"字段去掉，"typings"字段就可以留下来，不会再导致我的测试失败

karma-typescript 被 .d.ts 打字混淆为无法绑定到 npm 包代码

karma-typescript confused by .d.ts typings into failing to bind to npm package code

javascript

commonjs

npm

typescript

karma-mocha