ecmascript-6 - 扩展 HyperHTMLElement 时出错

Question

我正在尝试使用定义一个简单的自定义元素HyperHTMLElement，但是我似乎无法extend HyperHTMLElement不收到来自 Chrome（以及 Safari）的投诉。

src/index.js

import 'document-register-element'
import HyperHTMLElement from 'hyperhtml-element/esm'

const { bind } = HyperHTMLElement

class Hello extends HyperHTMLElement {
  created() { this.textContent = 'hello' }
}
Hello.define('hello-element')

bind(document.body)`<hello-element />`

rollup.config.js

import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'

export default {
  input: 'src/index.js',
  output: [{ file: 'bundle.js', sourcemap: 'inline', format: 'iife', name: 'oye' }],
  plugins: [
    babel({
      exclude: 'node_modules/**',
      presets: [ ["env", { "modules": false }] ],
      plugins: [ "external-helpers" ]
    }),
    nodeResolve({ module: true, jsnext: true, main: true, browser: true }),
    commonjs(),
  ]
}

index.html：

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

Rollup 将所有内容捆绑在一起，没有错误：

但是，Chrome 报告了这一点：

我也尝试切换到 Webpack+Babel，但无济于事——仍然报告了相同的堆栈跟踪（与 Webpack 特定的细微差别）。

score 0 · Accepted Answer

看起来 babel 需要被告知不排除node_modules/hyperhtml-element/**：

export default {
  ...
  plugins: [
    babel({
      exclude: 'node_modules/**',
      include: 'node_modules/hyperhtml-element/**',
      presets: [ ["env", { "modules": false }], 'stage-3' ],
      plugins: [
        // ["transform-es2015-classes", { "loose": true }],
        "external-helpers"
      ]
    }),
    ...
  ],
  ...
}

但是，我不完全确定这是正确的解决方案。

ecmascript-6 - 扩展 HyperHTMLElement 时出错

1 回答 1

Related

Reference