如何修复`类构造函数LitElement不能在没有'new'的情况下调用？

Question

我正在使用聚合物中的lit-element建立一个新项目，构建设置包括使用包裹。我也在使用typescript来编写代码。

我首先初始化npm并添加了所有必需的依赖项：

"dependencies": {
  "@polymer/lit-element": "^0.6.5",
  "@webcomponents/webcomponentsjs": "^2.2.1"
},
"devDependencies": {
  "parcel-bundler": "^1.11.0",
  "tslib": "^1.9.3",
  "typescript": "^3.2.2"
}

现在，当我运行包裹开始使用index.html时，包括：

@webcomponents/webcomponentsjs/webcomponents-bundle.js

我收到一个错误说：

Class constructor LitElement cannot be invoked without 'new'

根据其他人的建议我尝试将tsconfig目标设置为“es2016”，但这并不能解决错误。

我-element.ts

import { 
  LitElement,
  html,
  customElement,
  property 
} from '@polymer/lit-element'

@customElement('ui-text')
export class UiText extends LitElement {
  render() {
    return html`<p>Hi</p>`
  }
}

Answer 1

经过一段时间的努力之后，似乎包裹（截至v1.12.3）有一个问题，它不考虑browserslist，除非index.html与packages.json，package-lock.json和node_modules在同一个文件夹中。在我重新组织我的源文件并添加"browserslist": ["Chrome > 46"]后，它开始正常工作。

Answer 2

如果我正确理解Parcel，它将始终将您的JS编译为es5，在这种情况下，您将必须提供es5适配器https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs，它允许代码假装运行为使用customElements.define()注册实际自定义元素所需的类。

Answer 3

创建文件.browserslistrc：

last 1 chrome versions

并确保包裹缓存清晰。我建议您使用旗帜运行包裹：

parcel entryPoint --no-cache

More info。