4

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

我首先初始化 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”，但这并不能解决错误。

我的元素.ts

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

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

4 回答 4

1

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

于 2019-06-10T02:13:03.413 回答
1

创建文件.browserslistrc ：

last 1 chrome versions

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

parcel entryPoint --no-cache

更多信息。

于 2019-04-03T13:27:48.510 回答
1

目前，提议的 custom-elements-es5-adapter.js并没有真正“适应” parceljs（对于 Chrome）产生的任何东西。在这个问题上有更多关于这个主题的内容：https ://github.com/Polymer/lit-element/issues/54 。在 package.json 中明确说明目标浏览器会有很大帮助，这里有一个例子：

"browserslist": [
  ">2%",
  "Edge > 14",
  "Firefox > 63",
  "Chrome > 67"
]

之后，您可以通过运行使用此语句检查实际目标浏览器npx browserslist- 请参阅https://github.com/browserslist/browserslist中的语法等

项目结构不是问题，browserslist无论 index.html 和其他源文件的位置如何，parceljs 都会检测到。

不幸的是，在我的情况下，IE11 的使用率大约是可怕的 10%，但我打算放弃它的支持，不管有友好的回退消息。

于 2019-11-20T01:39:13.457 回答
0

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

于 2019-06-10T03:31:27.613 回答