问题描述

我想通过CDN使用这个库。 https://www.jsdelivr.com/package/npm/lit-element

我的js代码在这里。

import { LitElement, html } from "https://cdn.jsdelivr.net/npm/lit-element@2.1.0/lit-element.js";

class MyElement extends LitElement {
    render(){
        return html`ABCD`
    }
}

customElements.define("my-element", MyElement)

我收到以下错误。

未捕获的TypeError：无法解析模块说明符"light-html"。相对引用必须以"/"、"./"或"../"开头。

我必须使用NPM生成吗？

更新

以下代码工作正常。

import { LitElement, html } from "https://unpkg.com/lit-element/lit-element.js?module"

class MyElement extends LitElement {
    render(){
        return html`ABCD`
    }
}

customElements.define("my-element", MyElement)

推荐答案

内部LitHtml和LitElement模块在内部使用裸模块说明符来导入依赖项，而JS模块还不支持这些。LitElement有import { TemplateResult } from 'lit-html'，但JS需要将'lit-html'替换为实际文件的路径(不是包的抽象名称)。

如果您使用cdn.jsdelivr.net提供的npm包，则必须使用构建步骤(webpack、ROLLUP等)将所有import语句解析为JS支持的文件路径或将所有文件内联在一起。

前者是unpkg.com ... ?module所做的，它将对lit-html的纯引用替换为绝对https://unpkg.com/lit-html@^1.1.1/lit-html.js?module。