我想创建可以在ie11上运行的web组件，我正在用gulp编译js（还有gulp-babel，包括babel 7）。
到目前为止，当我用Babel编译时，它在Chrome中工作，但在ie11中发送一个错误：Function.prototype.toString: 'this' is not a Function object .
在gulpfile.js中，我有这样的代码：
.pipe(babel({
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
}
}]
]
}))在js中，我有这样的代码（我在Web上找到的用于测试的示例代码）：
class MyCustomTag extends HTMLElement {
connectedCallback() {
this.innerHTML = '<h2>My custom element</h2><button>click me</button>';
this.style.backgroundColor = 'blue';
this.style.padding = '20 px';
this.style.display = 'inline-block';
this.style.color = 'white';
}
}
try {
customElements.define('my-custom-tag', MyCustomTag)
} catch (err) {
const h3 = document.createElement('h3')
h3.innerHTML = "This site uses webcomponents which don't work in all browsers! Try this site in a browser that supports them!"
document.body.appendChild(h3)
}当然，我在HTML中添加了<my-custom-tag></my-custom-tag>。
当代码中有“extends HTMLElement”时，Babel生成的内容会引发错误（Babel生成了类似于“_.isNative”的东西，它使用了Function.prototype.Tostring，如果我没记错的话--抱歉，我现在在另一台计算机上）我肯定我错过了一些愚蠢的东西，但是我找不到关于这个错误的任何答案。我试着添加@babel/plugin-transform-classes，babel-plugin-transform-builtin-classes，但什么都不管用这让我抓狂。
你知道吗？
2条答案
按热度按时间dm7nw8vv1#
我只是浪费了几个小时在完全相同的问题上!我首先怀疑Webpack做了一些奇怪的事情，然后我认为这是巴别塔的问题，等等。
最后我发现，你需要加载webcomponents.js polyfill来修复IE11的这个问题!下面是如何：
然后在HTML文件的头部加载多边形填充：
现在，即使是IE也应该能很好地处理您的Web组件。
1l5u6lss2#
对我来说，这是polyfill导入的顺序。在改变了顺序，使webcomponts polyfill在core-js/es/arrayimport之前之后，问题就解决了。
polyfill.ts文件的最终版本：
版本：