我可以使用CDN中的ES模块库吗？

Question

我想通过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：无法解析模块说明符“ lit-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)

Answer 1

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

如果使用npm软件包（cdn.jsdelivr.net在此处提供），则必须使用构建步骤（WebPack，Rollup等）将所有这些import语句解析为文件路径JS支持或内联所有文件。

前者是unpkg.com ... ?module的工作，它用绝对值lit-html代替了对https://unpkg.com/lit-html@^1.1.1/lit-html.js?module的裸引用。