javascript - 如何让 Web 组件使用 TypeScript 为 IE11/Edge/Chrome/Firefox 编译？

Question

设置了一个网络项目以使用 TypeScript/WebPack 我无法让 Google Chrome 运行结果:

错误显示:“未捕获的类型错误:构造‘HTMLElement’失败:请使用‘new’运算符，此 DOM 对象构造函数不能作为函数调用。”

我了解到a shim is required用于转换为 ES5，但我仍然无法让它工作。这可能是因为我不想向 HTML 添加 <script> 元素，而是想 import "../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle";在我的 .ts文件。

如何在不向我的 HTML 文件添加 <script> 元素的情况下让它工作？

我拿走了我的 tsconfig.json和 webpack.config.js来自 this tutorial 的文件.

Answer 1

解决方法如下:

npm install @webcomponents/webcomponentsjs --save-dev

import "@webcomponents/webcomponentsjs/webcomponents-bundle";
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

...

据我所知，这在 Chrome、Firefox、Edge 和 IE11 上运行流畅。