typescript - 带有 typescript 和 karma 的 Babelify 项目

Question

设置和目标

Typescript 项目，带有 typescript mocha 测试。项目应从 Typescript 转译为 ES6，然后通过 Babel 进行转换对于几个可交付的 bundle 。

我想通过 Karma 在浏览器中运行所有测试(最终 BrowserStack )与 babel 生成的相同转换版本。

尝试与问题

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

• karma-typescript-es6-transform : 仅转换捆绑的 ES6 模块，不转换用户代码。
• karma-browserify连同 babelify transform:browserify 似乎与 karma typescript 或至少它的转换系统不兼容。当 babel 找不到 some/some.js 时失败文件，似乎只存在于 karma 内存中。
• 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对于 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。

因为我有点好奇它是否以这种方式工作，所以我 fork 了你的 repo 协议(protocol)并提出了拉取请求。我还清理了一些设置文件。您可以通读拉取请求中的更改，以了解完成了什么。

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

• 改为@babel/core:^7.0.0 -compiler
• 更改了 Babel 的预设以匹配 babel 版本 7
• 使用 babel-core": "^7.0.0-bridge.0 -解决方案来避免问题 - - 模块引用旧版本的 babel
• 给了一些额外的.tsconfig选项
• karma.conf 的一些小改动

编辑:

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

es5 现在已经被主要浏览器支持了一段时间，并且应该也可以在 FF 44 中工作。 es6 中也引入了类，这就是为什么您之前对类有疑问，编译到 es5 会将类转换为函数。

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