Question

我为WebGL程序提供了以下导出的JS类：

export default class MyClass extends EventTarget {
  constructor(gl) {
    super();
    // more code here
  }
}

Babel（babel-preset-es2015）在webpack JS包中生成以下代码：

var MyClass = function(_EventTarget) {
  _inherits(MyClass, _EventTarget);

  function MyClass(gl) {
    _classCallCheck(this, MyClass);
    var _this = _possibleConstructorReturn(this, 
                  (MyClass.__proto__ || 
                   Object.getPrototypeOf(MyClass)).call(this)); // ***
    // more code here
  }
};

在运行时，我从上面标有.call(this)的{{1}}调用中收到以下错误。

***

我最初认为这是一个与Webpack相关的问题，但经过更多的研究，我现在认为这个错误与Babel如何转换我的代码有关。

我应该在TypeError: Failed to construct 'EventTarget': Please use the 'new' operator, this DOM object constructor cannot be called as a function.中启用哪些选项，还是应该使用不同的babel插件？

Answer 1

通过向我的项目添加npm模块event-target-shim找到解决我自己问题的方法，并通过添加以下导入来更改类：

import { EventTarget } from 'event-target-shim';

export default class MyClass extends EventTarget {
  /* same as above */
}

Answer 2

我认为可能的问题是您没有在自己的类中从“事件”中导入EventTarget。

因此，您需要像这样的导入事件：

import EventTarget from 'events';

export default class MyClass extends EventTarget {
  constructor(gl) {
    super();
    // more code here
  }
}

我在代码和谷歌搜索上遇到了同样的问题。事实是，在浏览器上（无需babel），您不需要执行导入，但是当我运行jest测试时，它崩溃了，因为我使用的是babel，因此执行导入将达到目的；），无需安装npm模块

Babel和子类的EventTarget

2 个答案: