我正在尝试使用hyperhtml-element定义一个简单的自定义元素，但是如果没有从浏览器（Chrome）中获得以下错误，我似乎无法扩展HyperHTMLElement。
index.js:1 Uncaught TypeError: Cannot call a class as a function
at _classCallCheck (index.js:1)
at new MyElement (component.js:3)
//my .babelrc configuration
{
"env": {
"production": {
"presets": [
"stage-0",
[
"env", {
"targets": {
"browsers": ["last 2 Chrome versions", "last 2 Firefox versions", "last 2 Edge versions", "last 2 Safari versions", "ie 11"]
},
"modules": false,
"useBuiltIns": true
}
]
],
"plugins": [
"transform-object-rest-spread",
[
"babel-plugin-transform-builtin-classes", {
"globals": ["HTMLElement", "customElements"]
}
]
]
},
"test": {
"presets": [
["env", {
"targets" : { "node" : "current" },
"modules": "commonjs"
}],
"stage-0"
],
"plugins": [
"transform-object-rest-spread",
[ "babel-plugin-transform-builtin-classes", { "globals": ["HTMLElement"] } ]
]
}
}
}
//webpack configuration
exports.loaders = function() {
return [
{
test: /\.html$/,
use: ['text-loader']
},
{
test: /\.pcss$/,
use: ['text-loader', 'postcss-loader']
},
{
test: /\.svg$/,
use: ['text-loader']
},
{
test: /\.(js|jsx)$/,
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
cacheDirectory: true,
presets: [
[
'env',
{
targets: {
browsers: [
'last 2 Chrome versions',
'last 2 Firefox versions',
'last 2 Edge versions',
'last 2 Safari versions',
'ie 11'
]
},
modules: false,
useBuiltIns: true
}
],
'stage-0',
'react',
'flow'
],
plugins: [
'transform-object-rest-spread',
'transform-async-to-generator',
[ "babel-plugin-transform-builtin-classes", { "globals": ["HTMLElement"] } ]
]
}
}
],
include: resolveModulesPath
}
];
};
import HyperHTMLElement from 'hyperhtml-element'
class MyElement extends HyperHTMLElement {
created() { this.textContent = 'my element' }
}
// classes must be defined through their public static method
// this is the moment the class will be fully setup once
// and registered to the customElements Registry.
MyElement.define('my-element');<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo page</title>
<link rel="stylesheet" href="./styles.css">
<!-- polyfills to enable cross browser compatibility support -->
<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script defer src="../dist/webcomponent-elements-app.js"></script>
</head>
<body>
<section class="page-wrap">
<h1>Demo page</h1>
<my-element></my-element>
</section>
</body>
</html>