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

问题描述

我正在使用 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"，但这会造成另一个痛苦的世界，试图让 karma 和其他工具快乐。）

我可以很好地构建和运行使用上述 npm 包的项目，并且可以在 karma 之外运行 mocha 单元测试，没有任何问题。但是，在 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 目录的内容进行一点手动操作，并通过删除 package.json 来修改导入的 npm 包的 "typings": "dist/index"，karma 再次高兴，并且我所有的测试都成功了。

为什么，看在您选择的神的份上，类型的存在对 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,round } from '@tubular/math';

...问题消失了，这证实这是一个模块解析问题。

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

解决方法

我想通了。

karma-typescript 依赖于 browser-resolve，而我导入的 package.json 有一个 "browser" 条目，但目的有点不同，显然与 {{ 1}} 使用 karma-typescript。

只要我取出我的 browser-resolve 字段，"browser" 字段就可以保留，不再导致我的测试失败。