typescript - Hvordan fikse `Klassekonstruktør LitElement kan ikke kalles uten 'new'`?

Jeg setter opp et nytt prosjekt ved å bruke lit-element fra polymer, og byggeoppsettet inkluderer bruk av parcel. Jeg bruker også TypeScript for å skrive koden min.

Jeg begynte med å initialisere npm og la til alle nødvendige avhengigheter:

"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"
}

Nå når jeg kjører pakken for å starte med index.html som inkluderer:

@webcomponents/webcomponentsjs/webcomponents-bundle.js

Jeg får en feil som sier:

Class constructor LitElement cannot be invoked without 'new'

Basert på andres forslag har jeg prøvd å sette tsconfig target til "es2016", men dette løser ikke feilen.

min-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>`
  }
}

Svar #1

Etter å ha slitt med det en stund, ser det ut til at parcel (fra v1.12.3) har et problem hvor det ikke tar hensyn til browserslist med mindre index.html er i samme mappe som packages.json, package-lock.json og node_modules. Etter at jeg omorganiserte kildefilene mine og la til "browserslist": ["Chrome > 46"], begynte det å fungere fint.

Svar #2

For øyeblikket gjør foreslått custom-elements-es5-adapter.js egentlig ikke "tilpasning" av det som produseres av parceljs (for Chrome). Det er mye mer om dette emnet i denne saken: https://github.com/Polymer/lit-element/issues/54. Å eksplisitt oppgi målrettede nettlesere i package.json vil hjelpe mye, her er et eksempel:

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

Etterpå kan du sjekke de faktisk målrettede nettleserne med denne uttalelsen ved å kjøre npx browserslist - se syntaksen og mer på https://github.com/browserslist/browserslist

Prosjektstrukturen er ikke et problem, og parceljs vil oppdage browserslist uavhengig av plasseringen av index.html og andre kildefiler.

Dessverre, i mitt tilfelle er IE11-bruken på rundt skremmende 10 %, men jeg planlegger å fjerne støtten uansett med en vennlig tilbakemeldingsmelding.

Relaterte artikler