巴别塔[karma-babel-preprocessor]不能将ES6转换成ES5用于Karma测试

Question

我们已经安装了karma，它使用mocha和chai进行测试。我们正在尝试使用karma-babel-preprocessor将babel直接集成到karma中，以将我们的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等。

谢谢！

- Alex Gurr

---

Karma可以在浏览器上运行你的组件和测试。如果你想测试你的Node模块，使用像Jasmine、Mocha这样的Node运行器即可。你不需要使用Karma进行测试，事实上使用它是错误的，因为它是一个不同的运行时。 - André Werlang

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：找不到变量：exports错误。

解决方法：

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

• Add following to 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";

- awei

---

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

谢谢！我不得不删除所有的webpack配置 :)！ - Andrej Gaspar

Answer 2

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

• 使用karma-commonjs wrapper（如果要手动添加所有依赖项）
• 使用browserify捆绑器和babelify插件
• 使用webpack捆绑器

- Roman Bekkiev

---

是的。 https://github.com/babel/karma-babel-preprocessor 这个页面说：“babel和karma-babel-preprocessor只将ES6模块转换为CommonJS / AMD / SystemJS / UMD。如果您选择CommonJS，则仍然需要自行解析和连接CommonJS模块。在这种情况下，我们建议使用karma-browserify + babelify或webpack + babel-loader。” 也就是说，我们可以将其转换为ES2015或其他格式，但我们不处理模块，因此您需要在babel之后使用另一个预处理器来完成这项工作。 - mattpr

Answer 3

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

npm i babel --save-dev

我的一个项目上几乎有相同的配置，意味着让karma在运行时预处理文件，唯一的区别是我也安装了babeljs。

希望这可以帮到你。

祝好

- Csaba Vályi

---

显然，文件已经被转译了。很可能是因为全局安装了Babel（npm install -g babel），以防止本地的“node_modules”无法控制地增长。 - ankhzet