使用 babel es2015 运行 mocha 无法正常工作答案

【问题标题】：Running mocha with babel es2015 not working properly使用 babel es2015 运行 mocha 无法正常工作
【发布时间】：2015-11-07 18:53:48
【问题描述】：

我正在努力让 Babel 6 为我工作。我在日常工作（用于 React 开发）中非常成功地使用了 5，但 6 似乎并没有像预期的那样与 Mocha 集成。

我有这些devDependencies、脚本和 babel 配置：

{
  "devDependencies": {
    "babel-cli": "^6.1.2",
    "babel-core": "^6.1.2",
    "babel-preset-es2015": "^6.1.2",
    "mocha": "^2.3.3"
  },
  "scripts": {
    "test": "mocha --compilers js:babel-core/register ./tests --recursive"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

这是我的测试代码：

import ObjectBeingTested from '../src/object-being-tested';

describe('ObjectBeingTested', () => {
  it('does stuff', () => {
    const obj = new ObjectBeingTested({ foo: 0, bar: 1 });
    // ...
  });
});

...源代码有：

export default class ObjectBeingTested {
  constructor({ foo, bar}) {
    this.foo = foo;
    this.bar = bar;
  }
}

但是，在运行时，我在构造函数的第一行得到foo is not defined。有趣的是，如果我直接编译代码并通过节点 CLI 直接调用它，它就可以正常工作。以下是babel-cli 为该文件生成的内容：

"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

Object.defineProperty(exports, "__esModule", {
  value: true
});

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var ObjectBeingTested = (function () {
  function ObjectBeingTested(_ref) {
    _classCallCheck(this, ObjectBeingTested);

    var foo = _ref.foo;
    var bar = _ref.bar;

    this.foo = foo;
    this.bar = bar;
  }

  _createClass(ObjectBeingTested, [/*...other defs */]);

  return ObjectBeingTested;
})();

exports.default = ObjectBeingTested;

如何正确运行 mocha 来转译测试及其导入的任何内容？

我尝试过的事情：

将 babel 配置移动到 .babelrc 文件中；没有区别。
使用-r babel-core/register 代替--compilers 也不起作用。

更新

这很有趣。我决定在导入后做一个console.log(ObjectBeingTested.toString()) 看看摩卡得到了什么；这是它的输出：

function ObjectBeingTested(_ref) {
    _classCallCheck(this, ObjectBeingTested);

    this.foo = foo;
    this.bar = bar;
  }

请注意，两条取消引用的行完全丢失了。

更新 2：

这个问题与摩卡无关；我可以重现导入模块的转译方式与批量转译的方式不同。

【问题讨论】：

我认为这只是一个错误。打开这个问题：github.com/babel/babel/issues/2912

标签： javascript ecmascript-6 babeljs transpiler

【解决方案1】：

我找到了解决方法。首先，我切换到 Node 5（从 0.12 开始），这样我就需要更少的转换插件来运行代码。我首先尝试了es2015-node5 预设，但这仍然不起作用。因此，我在.babelrc 中引入了这些特定插件：

{
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-es2015-parameters",
    "transform-es2015-destructuring"
  ]
}

有了这些，我的构造函数终于正确编译了。

【讨论】：