用Babel扩展MediaSource —如何正确调用super（）？

Question

I'd like to extend MediaSource. I'm using Babel.

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

const source = new BradMediaSource();

In Chrome directly, this works fine. In a transpiled build done with Babel, I get the following error:

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

This seems similar to this GitHub issue: https://github.com/babel/babel/issues/1966 I have also tried the following package, but it doesn't seem to apply to my specific situation... makes no difference: https://www.npmjs.com/package/babel-plugin-transform-custom-element-classes

My .babelrc :

{ "presets": [ "es2015" ] }

Is there a way around this problem?

Answer 1

Generally extending builtin types does not work with compiled classes from Babel, so you'd need to configure Babel to not process classes, and limit your application to only browsers that support classes.

Assuming your target browsers all support ES6 class syntax, the easiest approach would be to use babel-preset-env configured for those target environments.

You can also try to use transform-builtin-extend in your Babel config for MediaSource , though that does tend to vary with exactly which things can be extended.