babel 将 ES6 转译为 ES5 时未定义的方法

Question

我在将 babel 转译为 ES5 时遇到问题。对于我的大多数应用程序 所有其他 classes 均已正确编译。然而，其中一个 classes 有问题。当它被转译时，none 的方法会出现在实例上。

当执行class构造函数时，抛出一个异常：

Uncaught TypeError: this.basket.setCurrency is not a function

这里是 class.

export class Basket extends ItemSet {
  static get currencies() {
    return [
      { code: 'gbp', symbol: '£', title: 'Pounds' },
      { code: 'usd', symbol: '$', title: 'US Dollars' },
      { code: 'eur', symbol: '€', title: 'Euros' }
    ];
  }

  constructor(currency, ...args) {
    super(...args);
    this.store = window.localStorage;
    this.setCurrency(currency);
    this.load();
  }

  setCurrency(code) {
    // Only set the currency if it's valid for our Basket
    Basket.currencies.forEach((currency) => {
      if (currency.code == code) {
        this.currency = currency;
        this.store.cxCurrency = JSON.stringify(this.currency);
      }
    });
  }

  ... <snip> ...

}

它正在扩展的 class，ItemSet 可以在 basket-weaver:

中找到

https://github.com/andrewebdev/basket-weaver/blob/master/src/items.js#L72-L80

export class ItemSet extends Array {

  getTotal(...args) {
    let subTotals = this.map(item => { return item.getTotal(...args); });
    if (!subTotals) throw "Cannot call getTotal() on an empty ItemSet";
    return sum(...subTotals);
  }

}

最后，这是 babel 在运行时生成的代码已转译，为简洁起见仅粘贴相关部分：

var Basket =
/*#__PURE__*/
function (_ItemSet3) {
  babelHelpers.inherits(Basket, _ItemSet3);

  function Basket() {
    babelHelpers.classCallCheck(this, Basket);
    return babelHelpers.possibleConstructorReturn(this, (Basket.__proto__ || Object.getPrototypeOf(Basket)).apply(this, arguments));
  }

  babelHelpers.createClass(Basket, [{
    key: "setCurrency",
    value: function setCurrency(code) {
      var _this7 = this;

      // Only set the currency if it's valid for our Basket
      Basket.currencies.forEach(function (currency) {
        if (currency.code == code) {
          _this7.currency = currency;
          _this7.store.cxCurrency = JSON.stringify(_this7.currency);
        }
      });
    }
  }, {
    ... <snip lots of other methods & properies> ...
  }]);
  return Basket;
}(_items.ItemSet);

_exports.Basket = Basket;

最后一点背景知识：我正在使用 polymer build 进行转译因为我的组件主要是聚合物元素。

有人知道是什么原因造成的吗？

Answer 1

原来这是因为 es5 不允许你扩展数组。我在这里找到了一些解决方法：

我在 basket-weaver 的一个特殊 es5-compat 分支上实现了这个。

babel 将 ES6 转译为 ES5 时未定义的方法

Methods undefined when babel transpiled ES6 to ES5

ecmascript-5

polymer

babeljs

es6-class