要求

为了在各种浏览器和工具中使用 Lit，最重要的是要了解以下几点：

• Lit 以 ES2021 形式发布。
• Lit 使用"裸模块说明符"来导入模块。
• Lit 使用现代 Web API，如 <template>、自定义元素、Shadow DOM 和 ParentNode。

这些功能在主流浏览器的最新版本（包括 Chrome、Edge、Safari 和 Firefox）和大多数流行工具（如 Rollup、Webpack、Babel 和 Terser）中都得到支持——除了浏览器中的裸模块说明符支持。

在使用 Lit 开发应用程序时，你的目标浏览器需要原生支持这些功能，或者你的工具需要处理它们。虽然有大量浏览器对现代 Web 功能的支持程度各不相同，但为了简单起见，我们建议将浏览器分为以下两类：

• 现代浏览器支持 ES2021 和 Web Components。工具必须解析裸模块说明符。
• 旧版浏览器支持 ES5，但不支持 Web Components 或较新的 DOM API。工具必须编译 JavaScript 并加载 polyfills。

本页面概述了如何在开发和生产环境中满足这些要求。

有关满足这些要求的工具和配置建议，请参见开发、测试和生产构建。

在现代浏览器上使用 Lit 唯一需要的转换是将裸模块说明符转换为浏览器兼容的 URL。

Lit 使用裸模块说明符在其子包之间导入模块，如下所示：

import {html} from 'lit-html';

现代浏览器目前只支持从 URL 或相对路径加载模块，而不支持引用 npm 包的裸名称，因此构建系统需要处理它们。这应该通过将说明符转换为适用于浏览器中 ES 模块的说明符，或者生成不同类型的模块作为输出来完成。

Webpack 自动处理裸模块说明符；对于 Rollup，你需要一个插件（@rollup/plugin-node-resolve）。

**为什么使用裸模块说明符？**裸模块说明符让你可以导入模块，而无需知道包管理器将它们安装在哪里。一个名为 Import maps 的标准提案正在发布，它将让浏览器支持裸模块说明符。在此期间，裸导入说明符可以在构建步骤中轻松转换。还有一些支持导入映射的 polyfills 和模块加载器。

所有现代浏览器都会自动更新，用户很可能会使用最新版本。Lit 及相关库在 Chromium、Safari 和 Firefox 的当前版本以及 Chromium 和 Safari 的前两个主要版本，以及 Firefox 的扩展支持版本（ESR）上进行测试。旧版本可能仍然可以工作，但将是尽最大努力而无法保证。

Lit 3 未在旧版浏览器上测试，特别是由于非标准 DOM 行为，不支持 Internet Explorer 11 和经典版 Edge。如果你必须支持旧版浏览器，请考虑使用 Lit 2，并按照为旧版浏览器构建中的说明进行额外的编译和/或使用 polyfills。