babel-plugin-transform-custom-element-classes, 编译 ES6 HTMLElement类扩展到 ES5

分享于 

2分钟阅读

GitHub

  繁體 雙語
Compile ES6 HTMLElement class extensions to ES5
  • 源代码名称:babel-plugin-transform-custom-element-classes
  • 源代码网址:http://www.github.com/github/babel-plugin-transform-custom-element-classes
  • babel-plugin-transform-custom-element-classes源代码文档
  • babel-plugin-transform-custom-element-classes源代码下载
  • Git URL:
    git://www.github.com/github/babel-plugin-transform-custom-element-classes.git
    Git Clone代码到本地:
    git clone http://www.github.com/github/babel-plugin-transform-custom-element-classes
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/github/babel-plugin-transform-custom-element-classes
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    babel-plugin-transform-custom-element-classes

    编译扩展了ES5环境的HTMLElement的自定义元素类。

    问题

    自定义元素是针对原生ES6类设计的,可以Prototype继承不能扩展宿主对象的方式扩展宿主对象。 使用 Babel transform-es2015-classes 转换将不能像下面这样工作。 你可能会看到运行时错误,如 "Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function." 当试图在 Babel transpiled类中扩展 HTMLElement 时。

    解决方案

    解决方法是使用 Reflect.construct 来构建构造器预期的新 HTMLElement 实例。 这个转换将扩展 HTMLElement的任何ES6类包装为一个中间类,该类将关闭这里行为。

    兼容性

    ChromeFirefoxIEOperaSafari

    带有自定义元素的

    ChromeFirefoxIEOperaSafari

    安装

    $ npm install babel-plugin-transform-custom-element-classes

    用法

    .babelrc

    。babelrc

    // include before transform-es2015-classes{
     "plugins": [
     "transform-custom-element-classes",
     "transform-es2015-classes" ]
    }

    COM  ext    extensions  es6  es5  
    相关文章