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

Answer 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"
      ]
    }),
    ...
  ],
  ...
}

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

扩展HyperHTMLElement时出错

1 个答案: