使用 Babel 扩展 MediaSource —— 如何正确调用 super()？

Question

我想扩展 MediaSource。我正在使用 Babel。

class BradMediaSource extends MediaSource {
  constructor() {
    super();
  }
}

const source = new BradMediaSource();

直接在 Chrome 中，这工作正常。在使用 Babel 完成的编译构建中，我收到以下错误：

Uncaught TypeError: Failed to constructor 'MediaSource': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

这似乎类似于这个 GitHub 问题：https://github.com/babel/babel/issues/1966 我也尝试了以下包，但它似乎不适用于我的具体情况......没有区别：https://www.npmjs.com/package/babel-plugin-transform-custom-element-classes

我的.babelrc：

{ "presets": [ "es2015" ] }

有没有办法解决这个问题？

Answer 1

通常扩展内置类型不适用于从 Babel 编译的类，因此您需要将 Babel 配置为不处理类，并将您的应用程序限制为仅支持类的浏览器。

假设您的目标浏览器都支持 ES6 类语法，最简单的方法是使用为这些目标环境配置的 babel-preset-env。

您也可以尝试在 Babel 配置中为 MediaSource 使用 transform-builtin-extend，尽管具体可以扩展的内容会有所不同。