Babel 7：Function.prototype.toString："this"不是函数对象

Question

我想创建应该在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中，我有这样的东西(我在网上找到的示例代码用于测试(：

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>。

当代码中有"扩展 HTMLElement"时，错误会在 Babel 生成的东西上抛出(如果我记得不错的话，Babel 生成了类似使用 Function.prototype.Tostring 的"_.isNative"的东西 - 对不起，我目前在另一台计算机上( 我确定我错过了一些愚蠢的东西，但我找不到有关此错误的任何答案。我尝试添加@babel/插件转换类，babel-plugin-transform-builtin-classes，但没有任何效果，这让我发疯。

知道吗？

Answer 1

我只是在完全相同的问题上浪费了几个小时！我首先怀疑 Webpack 做了一些奇怪的事情，然后我认为这是 Babel 的问题，等等。

最后我想通了，你需要加载 webcomponents.js polyfill 来修复 IE11 的问题！方法如下：

npm install @webcomponents/webcomponentsjs

然后在 HTML 文件的头部加载填充代码：

<!-- load webcomponents bundle, which includes all the necessary polyfills -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

现在，即使是IE也应该与您的Web组件配合得很好。

Answer 2

Angular 10 在 IE11 上使用 Webcomponents。

对我来说，这是填充物导入的顺序。在更改顺序以使webcomponts polyfills在core-js/es/array导入之前之后，问题消失了。

polyfills.ts 文件的最终版本：

/***************************************************************************************************
* BROWSER POLYFILLS
*/
// if you are compiling to ES5 (check tsconfig.json) then you need this
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
// for browser not supporting custom elements
import '@webcomponents/custom-elements/custom-elements.min.js';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.
/** For IE 11 */
import 'core-js/es/promise';
import 'core-js/es/string';
import 'core-js/es/map';
import 'core-js/es/set';
import 'core-js/es/array';

/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone';  // Included with Angular CLI.

版本：

"@angular/core": "~10.2.4",
"@angular/elements": "^10.2.4",
"@webcomponents/custom-elements": "^1.4.3",
"@webcomponents/webcomponentsjs": "^2.5.0",