使用 typescript 和 karma 进行 Babelify 项目

Question

设置和目标

Typescript 项目，带有 typescript mocha 测试。项目应该从 Typescript 转换为 ES6，然后通过 Babel 转换为几个可交付的捆绑包。

我想通过Karma（最后是BrowserStack）在浏览器中针对与 babel 生成的相同转换版本运行所有测试。

尝试和问题

我有 karma-typescript + mocha 工作，但只在 es2017 兼容的浏览器中工作。问题是在两者之间插入 babel。
我想我已经尝试了我能想象到的一切，但就是：

• karma-typescript-es6-transform：只转换捆绑的 ES6 模块，而不是用户的代码。
• karma-browserify 和 babelify 转换：browserify 似乎与 karma typescript 或至少它的转换系统不兼容。当 babel 找不到 some/some.js 文件时失败，该文件似乎只存在于业力记忆中。
• karma-babel-preprocessor 似乎是正确的做法。

以上还有很多变体，但都没有奏效。

karma-babel-preprocessor 的有希望的设置

我认为这应该是正确的做法，所以我发布了一个包含我当前状态的项目：https://github.com/anpur/karma-typescript-babelify。

这是我karma.conf.js的一部分：

frameworks: ['mocha', 'karma-typescript'],

preprocessors: {
  'src/*.ts': ['karma-typescript', 'babel'],
},

babelPreprocessor: {
  options: {
    presets: [
      [ 'es2015' ]
    ]
  }
},

karmaTypescriptConfig: {
    compilerOptions: {
      sourceMap: true,
      target: 'es6'
    },
    bundlerOptions: {
      addNodeGlobals: true,
      sourceMap: true
    },
    tsconfig: './tsconfig.json'
},

Karma 能够在此设置中进行转换 -> 转换 -> 捆绑它，但我遇到了一整套不同的奇怪问题（没有浏览器在这种状态下工作）：

• 在 es2017 浏览器 (Chrome) 中：Uncaught Error: Can't find entrypoint for some-test.ts（mocha 可以正常工作，无需 babel 转换）。
• 在旧版 Firefox 44 中 TypeError: global is undefined。
• 在 IE 10 Unable to get property 'wrappers' of undefined or null reference.

附： - 上述模块/框架对我来说都不重要，所以我会对任何其他工作设置感到满意，它可以进行 typescript -> babel -> browserstack 测试。谢谢！

Answer 1

我曾考虑使用 Babel 7 编译器对此进行测试，该编译器本身支持编译 TypeScript，安装在较旧的 Babel 6 中。

因为我有点好奇它是否以这种方式工作，所以我分叉了你的 repo 并提出了 pull request。我还清理了一些设置文件。您可以通读拉取请求中的更改以了解所做的工作。

现在测试似乎按预期通过了，干杯！ heres pull request

• 更改为@babel/core:^7.0.0 -compiler
• 更改了 Babel 的预设以匹配 babel 版本 7
• 使用babel-core": "^7.0.0-bridge.0 -resolution 来避免在 - - 模块引用旧版本的 babel 时出现问题
• 提供了一些额外的.tsconfig 选项
• 对karma.conf 的一些小改动

编辑：

我确实相信您可以将 Babel 加载器从构建行中删除，并将 karma-typescript -loader 参数提供给目标 es5。

es5 已经被主流浏览器支持一段时间了，应该也可以在 FF 44 中使用。 es6 中也引入了类，这就是为什么你之前遇到类问题的原因，编译到 es5 会将类转换为函数。

karmaTypescriptConfig: {
  compilerOptions: {
    sourceMap: true,
    target: 'es5' // <-- this here

Answer 2

我发现了 webpack 的替代方法。 所以业力 -> webpack -> babel。

这里是demo project。 如果您正在尝试迁移真实项目，它将进行测试。 该项目还解决了运行 DOM 测试的问题。