需求

为了与各种浏览器和工具一起使用 Lit，最重要的是要知道以下几点

• Lit 发布为 ES2021。
• Lit 使用“裸模块标识符”来导入模块。
• Lit 使用现代 Web API，例如<template>、自定义元素、Shadow DOM 和ParentNode。

这些功能受到主要浏览器（包括 Chrome、Edge、Safari 和 Firefox）的最新版本以及最流行的工具（例如 Rollup、Webpack、Babel 和 Terser）的支持，除了浏览器中对裸模块标识符的支持之外。

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

• **现代浏览器**支持 ES2021 和 Web 组件。工具必须解析裸模块标识符。
• **传统浏览器**支持 ES5，不支持 Web 组件或较新的 DOM API。工具必须编译 JavaScript 并加载 polyfills。

本页提供了在开发和生产环境中满足这些需求的一般概述。

请参阅开发、测试和构建生产环境，了解满足这些需求的工具和配置建议。

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

Lit 使用裸模块标识符在它的子包之间导入模块，例如

import {html} from 'lit-html';

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

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

**为什么使用裸模块标识符？**裸模块标识符让你在不知道包管理器到底将模块安装在哪个位置的情况下导入模块。一个名为导入映射的标准提案正在开始发布，它将允许浏览器支持裸模块标识符。在此期间，裸导入标识符可以轻松地作为构建步骤进行转换。也有一些 polyfills 和模块加载器支持导入映射。

所有现代浏览器都自动更新，用户很可能使用的是最新版本。Lit 和相关库在 Chromium、Safari 和 Firefox 的当前版本以及 Chromium 和 Safari 的前两个主要版本以及 Firefox 的扩展支持版本 (ESR) 上进行了测试。较旧的版本可能仍然可以使用，但将尽力而为，不保证能够使用。

Lit 3 并未在传统浏览器上进行测试，具体来说，Internet Explorer 11 和 Classic Edge 不受支持，因为它们的 DOM 行为不符合标准。如果你必须支持传统浏览器，请考虑使用 Lit 2，并按照构建传统浏览器中所述进行额外的编译和/或使用 polyfills。

编辑此页面