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 snippets：

"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，因此语法＆＃39; export＆＃39;仍然存在。

我们不想使用任何其他框架进行转换，即。 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声明（which I believe should be correct）不起作用。

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

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

Answer 2

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

npm i babel --save-dev

我在我的一个项目中有几乎相同的配置，这意味着让业务人员即时预处理我的文件，唯一不同的是我也安装了babeljs。

希望这有帮助。

干杯

Answer 3

问题是你仍然没有捆绑/包装你的文件以便能够在浏览器中执行CommonJS模块（因为Babel将es2015模块转换为CommonJS和CJS是节点的默认模块系统，而不是用于Karma运行的浏览器它的测试）。所以你的选择是：

使用karma-commonjs wrapper（如果您想手动添加所有依赖项）
将browserify bundler与babelify插件
使用webpack bundler

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

3 个答案: