扩展 HyperHTMLElement 时出错答案

【问题标题】：Error extending HyperHTMLElement扩展 HyperHTMLElement 时出错
【发布时间】：2018-04-13 14:05:53
【问题描述】：

我正在尝试使用 HyperHTMLElement 定义一个简单的自定义元素，但我似乎无法在没有来自 Chrome（以及 Safari）的投诉的情况下使用 extend HyperHTMLElement。

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 特定的细微差别）。

【问题讨论】：

标签： ecmascript-6 babeljs es6-class rollup hyperhtml

【解决方案1】：

看起来 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"
      ]
    }),
    ...
  ],
  ...
}

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

【讨论】：

好吧，如果你使用 babel，我想这是一个解决方案 ;-)