6

设置和目标

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 内存中。
  • 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 entrypointfor some-test.ts（mocha 可以正常工作，没有 babel 转换）。
  • 在旧的 Firefox 44TypeError: global is undefined中。
  • 在 IE 10Unable to get property 'wrappers' of undefined or null reference中。

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

4

2 回答 2

2

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

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

现在测试似乎按预期通过了，干杯！ 继承人拉请求

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

编辑：

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

主要浏览器现在支持 es5 有一段时间了，应该也可以在 FF 44 中使用。es6 中也引入了类，这就是为什么你之前对类有问题，编译到 es5 将类转换为函数。

karmaTypescriptConfig: {
  compilerOptions: {
    sourceMap: true,
    target: 'es5' // <-- this here
于 2018-05-10T19:24:28.600 回答
0

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

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

于 2019-05-11T03:26:22.370 回答