通过打字稿和业力来宣传项目

Question

设置和目标

打字稿项目,使用打字稿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 entrypointfor some-test.ts(mocha工作正常,没有babel变换).
• 在旧的Firefox 44中TypeError: global is undefined.
• 在IE 10中Unable to get property 'wrappers' of undefined or null reference.

PS - 上述模块/框架都不重要,所以我会对任何其他工作设置感到满意,这可以做打字稿 - > babel - > browserstack测试.谢谢!

Answer 1

我打算使用 Babel 7 编译器来测试它，它本身支持编译 TypeScript，而不是旧的 Babel 6。

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

测试现在似乎如预期通过了，干杯！ 这是拉取请求

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

编辑：

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

es5 目前已受到主要浏览器的支持，并且也应该可以在 FF 44 中运行。es6 中也引入了类，这就是为什么之前遇到类问题的原因，编译到 es5 会将类转换为函数。

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