首页 文章

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

提问于
浏览 次
11

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

谢谢！

javascript testing mocha karma-runner babeljs

3 回答

  • 0

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

    正在测试的代码 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";
    回复于
  • 11

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

    npm i babel --save-dev

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

    希望这可以帮助 .

    干杯

    回复于
  • 0

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

    回复于

相关问题