问题 Babel [karma-babel-preprocessor]不转换ES6-> ES5进行Karma测试

我们安装了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等

谢谢！

9650

2017-11-25 11:39

起源

Karma在浏览器上运行您的组件和测试。如果要测试节点模块，请使用jasmine，mocha等节点运行程序。你不需要Karma，事实上使用它是错误的，因为它是一个不同的运行时。 - André Werlang

答案:

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

正在测试的代码 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";

2018-01-09 09:58

这是我需要的答案。我不想添加Webpack或Browserify，因为我只是在使用Node。谢谢！ - Fernando

我想你还需要babel，而不仅仅是预设。

npm i babel --save-dev

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

希望这可以帮助。

干杯

2017-12-13 11:05

显然，文件是 transpiled。 Babel刚刚全球安装（可能）npm install -g babel保持当地 node_modules 从无法控制的增长 - ankhzet

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

使用 karma-commonjs包装器（如果你想手动添加所有的依赖项）
使用 browserify 捆绑器 babelify 插入
使用的WebPack 捆绑

-1

2018-02-08 12:39

问题 Babel [karma-babel-preprocessor]不转换ES6-> ES5进行Karma测试

答案:

热门问题