时间戳

首页 > 解决方案 > 我可以使用 CDN 中的 ES Modules 库吗？

javascript - 我可以使用 CDN 中的 ES Modules 库吗？

问题描述

我想通过 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)

标签： javascriptcdnlit-elementes6-modules

解决方案

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

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

前者是做什么的，它用absoluteunpkg.com ... ?module替换了裸引用。lit-htmlhttps://unpkg.com/lit-html@^1.1.1/lit-html.js?module

推荐阅读