Babel [karma-babel-preprocessor] 不为 Karma 测试转换 ES6->ES5答案

【问题标题】：Babel [karma-babel-preprocessor] Not Converting ES6->ES5 for Karma TestsBabel [karma-babel-preprocessor] 不为 Karma 测试转换 ES6->ES5
【发布时间】：2016-02-28 04:30:40
【问题描述】：

我们已经安装了 karma，它使用 mocha 和 chai 进行测试。我们正在尝试使用 karma-babel-preprocessor 将 babel 直接集成到 karma 中，以将我们的 ES6 文件转换为 ES5 以运行。单独使用 mocha 与 babel 一起使用，即 mocha 测试命令，但我们尝试使用 karma 代替它不起作用。

karma.conf.js sn-p:

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 sn-ps:

"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 等。

谢谢！

【问题讨论】：

Karma 在浏览器上运行您的组件和测试。如果您想测试您的节点模块，请使用 jasmine、mocha 等节点运行器。您不需要 Karma，实际上使用它是错误的，因为它是不同的运行时。

标签： javascript testing mocha.js karma-runner babeljs

【解决方案1】：

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

npm i babel --save-dev

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

希望这会有所帮助。

干杯

【讨论】：

很明显，文件被转译了。可能，Babel 只是全局安装 (npm install -g babel) 以防止本地 node_modules 不受控制地增长

【解决方案2】：

过去几个小时我一直在为同样的问题苦苦挣扎。我不确定你的用例是否和我的一样，但我终于弄明白了。

被测代码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";

【讨论】：

这是我需要的答案。我不想添加 Webpack 或 Browserify，因为我只是在使用 Node。谢谢！
谢谢！我不得不删除所有 webpack 配置 :)！

【解决方案3】：

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

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

【讨论】：

是的。 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 之后使用另一个预处理器来执行此操作。