5

我想创建应该在 ie11 上运行的 Web 组件。我正在用 gulp（和 gulp-babel，包括 babel 7）编译 js。

到目前为止，当我使用 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)
}

当然，我<my-custom-tag></my-custom-tag>在 HTML 中添加了。

当代码中有“扩展 HTMLElement”时，Babel 生成的东西会引发错误（如果我没记错的话，Babel 会生成类似“_.isNative”的东西，它使用 Function.prototype.Tostring - 抱歉，我目前在另一台计算机上）我确定我错过了一些愚蠢的东西，但我找不到关于这个错误的任何答案。我尝试添加@babel/plugin-transform-classes、babel-plugin-transform-b​​uiltin-classes，但没有任何效果，它让我发疯。

任何想法？

4

2 回答 2

15

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

最后我发现，你需要加载webcomponents.js polyfill来为 IE11 修复这个问题！方法如下：

npm install @webcomponents/webcomponentsjs

然后在 HTML 文件的头部加载 polyfill：

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

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

于 2018-10-24T14:16:18.890 回答
2

在 IE11 上带有 webcomponents 的 Angular 10。

对我来说，这是 polyfill 导入的顺序。在更改顺序以便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",
于 2021-01-04T15:42:59.600 回答