Babel [karma-babel-preprocessor]不转换ES6-> ES5用于Karma测试

Question

我们安装了karma,它使用mocha和chai进行测试.我们正在尝试使用karma-babel-preprocessor将babel直接整合到业力中,以便将我们的ES6文件转换为ES5来运行.使用mocha单独使用babel,即mocha测试命令,但我们尝试使用karma而不是它不起作用.

karma.conf.js片段:

frameworks: ['mocha', 'chai'],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
   'src/**/*.js': ['babel'],
   'test/**/*_spec.js': ['babel']
},

"babelPreprocessor": {
    options: {
        presets: ['es2015'],
        sourceMap: 'inline'
    },   
    filename: function(file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
    },
    sourceFileName: function(file) {
        return file.originalPath;
    }
},

// list of files / patterns to load in the browser
files: [
  'src/**/*.js',
  'test/**/*_spec.js'
],

package.json片段:

"scripts": {
  "test": "./node_modules/karma/bin/karma start karma.conf.js"
},

"babel": {
  "presets": ["es2015"]
},

"devDependencies": {
  "babel-preset-es2015": "^6.1.18",
  "chai": "^3.4.1",
  "karma": "^0.13.15",
  "karma-babel-preprocessor": "^6.0.1",
  "karma-chai": "^0.1.0",
  "karma-mocha": "^0.2.1",
  "karma-phantomjs-launcher": "^0.2.1",
  "phantomjs": "^1.9.18",
  "redux": "^3.0.4"
}

我们收到以下错误:

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
  ReferenceError: Can't find variable: exports
  at Users/alexgurr/BT/FutureVoice/trunk/Portal/server/src/login.es5.js:3

当我们评估正在加载的JS文件时,它们尚未转换为ES5,因此语法"export"仍然存在.

我们不想使用任何其他框架进行转换,即.webpack,browserify等

谢谢!

Answer 1

在过去的几个小时里,我一直在努力解决同样的问题.我不确定你的用例是否与我的相同,但我终于明白了.

被测代码src/foo.js:

var foo = "foo value";
export default foo;

测试代码tests/foo.spec.js:

import foo from "../src/foo.js";
describe('Foo', function() {
    it('should be "foo value"', function() {
        expect(foo).toBe('foo value');
    });
});

karma.conf.js 文件之前:

{
    // other configs
    files: [
       'src/**/*.js',
       'tests/**/*.spec.js',
    ],
    preprocessors: {
       'src/**/*.js': ['babel'],
       'tests/**/*.spec.js': ['babel'],
    },

    babelPreprocessor: {
        options: {
            "presets": ["es2015"]
        }
    }
}

这产生了ReferenceError: Can't find variable: exports你看到的错误.

修复:

• npm install --save-dev babel-plugin-transform-es2015-modules-umd

• 添加以下内容 karma.conf.js

  babelPreprocessor: {
      options: {
          "presets": ["es2015"],
          "plugins": ["transform-es2015-modules-umd"]
      }
  }
  

然后错误就消失了.

另请注意,以下export声明(我认为应该是正确的)不起作用.

// exports an object
export default var foo = "something";

// exports undefined
export var bar = "something else";

Answer 2

我认为你仍然需要 babel，而不仅仅是预设。

npm i babel --save-dev

我的一个项目有几乎相同的配置，这意味着让 karma 动态预处理我的文件，对我来说唯一的区别是我也安装了 babeljs。

希望这可以帮助。

干杯