开发

在项目的开发阶段，当您编写 Lit 组件时，以下工具可以帮助您提高效率

• 开发服务器，用于在不进行构建步骤的情况下预览代码。
• TypeScript，用于编写类型检查代码。
• 代码风格检查工具，用于捕获 JavaScript 错误。
• 代码格式化工具，用于一致地格式化代码。
• Lit 专用 IDE 插件，用于对 Lit 模板进行代码风格检查和语法高亮显示。

查看 入门套件 文档，轻松设置包含所有这些功能预配置的开发环境。

所有 Lit 包都使用 Node 的 导出条件 支持发布开发和生产版本。

生产版本使用非常激进的缩小设置进行优化。开发版本未缩小，便于调试，并包含额外的检查和警告。默认版本是生产版本，因此项目不会意外部署更大的开发版本。

您必须通过在支持导出条件的工具（例如 Rollup、Webpack 和 Web Dev Server）中指定 "development" 导出条件来选择开发版本。每个工具的实现方式不同。

例如，在 Rollup 中，使用 @rollup/node-resolve 插件，您可以使用 exportConditions 选项选择开发版本

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  // ...
  plugins: [nodeResolve({
    exportConditions: ['development']
  })]
};

ReactiveElement 和 LitElement 的开发版本支持额外的运行时警告，这些警告可以帮助识别在生产版本中检查成本很高的潜在问题。

一些警告始终会显示。还有两类可选警告，可以打开或关闭

• 'migration'。与从 LitElement 2.x 迁移相关的警告。默认情况下关闭。
• 'change-in-update'。与在更新期间更改响应式状态相关的警告。默认情况下打开。

您可以使用 ReactiveElement.disableWarning() 和 ReactiveElement.enableWarning() 方法控制可选警告。您可以在任何 ReactiveElement 子类（包括 LitElement 和您自己的类）上调用它们。在给定类上调用这些方法会打开或关闭该类及其所有子类的警告。例如，您可以关闭所有 ReactiveElement 类、所有 LitElement 类或特定 LitElement 子类的某类警告。

这些方法仅在开发版本中可用，因此请确保对其访问进行保护。我们建议使用可选链。

示例

import {LitElement, ReactiveElement} from 'lit';

// Turn off migration warnings on all ReactiveElements,
// including LitElements
ReactiveElement.disableWarning?.('migration');

// Turn off update warnings on all LitElements
LitElement.disableWarning?.('change-in-update');

// Turn off update warnings on one element
MyElement.disableWarning?.('change-in-update');

您还可以通过定义 static enabledWarnings 属性来控制单个类中的警告

class MyElement extends LitElement {
  static enabledWarnings = ['migration'];
}

为了代码大小，最好在您自己的生产版本中消除控制警告的代码。

当检测到任何 Lit 核心包（lit-html、lit-element、@lit/reactive-element）的多个版本，甚至多个相同版本的副本时，将触发仅在开发模式下的警告。

如果 Lit 被用作元素的内部依赖项，则元素可以使用 Lit 的不同版本，并且完全可以互操作。我们也确保 Lit 2 和 Lit 3 彼此大部分兼容。例如，您可以将 Lit 2 模板传递给 Lit 3 渲染函数，反之亦然。

那么，为什么会有警告呢？Lit 有时会被比作框架，这些框架通常在使用不同框架版本的组件混合在一起时会出错。因此，很容易意外安装多个重复的 Lit 版本，而没有意识到。

加载多个兼容的 Lit 版本不是最优的，因为必须向用户发送额外的重复字节。

如果您发布使用 Lit 的库，请遵循我们的 发布最佳实践，以便您的库的使用者能够在其项目中消除 Lit 的重复项。

解决多个版本的 Lit

即使按照以下步骤操作，也可能无法消除 Lit 的重复项，例如您依赖的库捆绑了 Lit 的特定版本。在这些情况下，可以忽略该警告。

如果您看到 加载了多个版本的 Lit 开发模式警告，可以尝试以下几种方法

1. 通过检查浏览器控制台中的以下变量来找出加载了哪些 Lit 库的多个版本：window.litElementVersions、window.reactiveElementVersions 和 window.litHtmlVersions。

2. 使用 npm ls（注意，您可以指定要查找的特定库，例如 npm ls @lit/reactive-element）来缩小范围，找出哪些依赖项加载了多个不同版本的 Lit。

3. 尝试使用 npm dedupe 消除 Lit 的重复项。使用 npm ls 验证是否成功消除了重复的 Lit 包。

4. 您可以通过使用 npm i @lit/reactive-element@latest lit-element@latest lit-html@latest 将它们作为项目的直接依赖项安装，来引导 npm 将 Lit 核心包的特定版本提升到顶层。用您想要消除重复的版本替换 latest。

5. 如果仍然存在重复项，您可能需要删除 package lock 和 node_modules。然后安装您想要的 lit 版本，再安装依赖项。

Lit 被打包为 JavaScript 模块，并使用大多数浏览器尚未原生支持的裸模块说明符。裸说明符是常用的，您可能也希望在自己的代码中使用它们。例如

import {LitElement, html, css} from 'lit';

要在浏览器中运行此代码，裸说明符（'lit'）需要转换为浏览器可以加载的 URL（例如 '/node_modules/lit/lit.js'）。

有许多开发服务器可以处理模块说明符。如果您已经拥有一个执行此操作并与您的构建过程集成的开发服务器，则应该足够了。

如果您需要开发服务器，我们建议使用 Web Dev Server。

Web Dev Server 是一个开源开发服务器，可以实现无构建的开发流程。

它可以处理将裸模块说明符重写为有效 URL，这是浏览器所需的。

安装 Web Dev Server

npm i @web/dev-server --save-dev

在您的 package.json 文件中添加一个命令

"scripts": {
  "start": "web-dev-server"
}

以及一个 web-dev-server.config.js 文件

export default {
  open: true,
  watch: true,
  appIndex: 'index.html',
  nodeResolve: {
    exportConditions: ['development'],
  },
};

运行开发服务器

npm run start

对于 IE11 等旧版浏览器，Web Dev Server 可以将 JavaScript 模块转换为使用向后兼容的 SystemJS 模块加载器，并自动提供 Web 组件 polyfills。您需要配置 @web/dev-server-legacy 包来支持旧版浏览器。

安装 Web Dev Server legacy 包

npm i @web/dev-server-legacy --save-dev

配置 web-dev-server.config.js

import { legacyPlugin } from '@web/dev-server-legacy';

export default {
  // ...
  plugins: [
    // Make sure this plugin is always last
    legacyPlugin({
      polyfills: {
        webcomponents: true,
        // Inject lit's polyfill-support module into test files, which is required
        // for interfacing with the webcomponents polyfills
        custom: [
          {
            name: 'lit-polyfill-support',
            path: 'node_modules/lit/polyfill-support.js',
            test: "!('attachShadow' in Element.prototype)",
            module: false,
          },
        ],
      },
    }),
  ],
};

有关完整安装和使用说明，请参阅 Web Dev Server 文档。

Lit 支持使用 TypeScript 开发组件，包括 Lit API 的完整类型声明、标准和实验性装饰器，以及用于模板类型检查和代码风格检查的社区工具。

由于 Lit 只是一个库，不需要编译器或使用非标准语言语法，因此不需要任何特定的 TypeScript 工具。Lit 可以与官方 TypeScript 编译器 tsc、TypeScript 包装器（例如 Rollup、Vite 或 Webpack 的包装器）以及其他编译器（例如 esbuild）一起使用。

TypeScript 项目的主要需求是

• 启用现代 JavaScript 语言级别，例如使用 "ES2021" lib。
• 使用 "DOM" lib 启用 DOM 类型。
• 如果您选择使用 TypeScript 的实验性装饰器，则可以选择启用实验性装饰器 并 禁用类字段的 "define" 语义。

这些选项通常在项目的 tsconfig 中设置。

要在项目中安装 TypeScript

npm i -D typescript

要构建代码

npx tsc --watch

有关完整安装和使用说明，请参阅 TypeScript 网站。要开始使用，安装 TypeScript 和 使用其功能 部分特别有用。

TypeScript 支持两种版本的装饰器：实验性和标准。有关更多信息，请参阅我们的 装饰器 文档。

代码风格检查可以帮助捕获代码中的错误。我们建议使用 ESLint 对 Lit 代码进行代码风格检查。

要在项目中安装 ESLint

npm install eslint --save-dev
npx eslint --init

要运行它

npx eslint yourfile.js

或将其添加到 npm 脚本中

{
  "scripts": {
    "lint": "eslint \"**/*.{js,ts}\"",
  }
}

有关完整安装和使用说明，请参阅 ESLint 文档。

我们还建议使用 eslint-plugin-lit for ESLint，它可以为 Lit 的 HTML 模板提供代码风格检查，包括常见的 HTML 代码风格检查以及 Lit 特定规则。

将 linting 整合到您的 IDE 工作流程中可以帮助尽早发现错误。请参阅 Lit 专用 IDE 插件，了解如何配置您的 IDE 以使用 Lit。

使用代码格式化程序可以帮助确保代码的一致性和可读性。将您选择的格式化程序集成到您的 IDE 中，可以确保您的代码始终保持干净整洁。

一些流行的选择包括

• Prettier: VS Code 插件
• Beautifier: VS Code 插件
• Clang: VS Code 插件

在使用 Lit 进行开发时，有很多 IDE 插件可能会有用。特别地，我们建议使用支持 Lit 模板的语法高亮显示器。

lit-plugin 为 Lit 模板提供语法高亮显示、类型检查等功能。它 适用于 VS Code，或者您可以使用 ts-lit-plugin TypeScript 编译器插件，它适用于 Sublime Text 和 Atom。

lit-plugin 和 ts-lit-plugin 提供

• 语法高亮显示
• 类型检查
• 代码补全
• 悬停文档
• 跳转到定义
• Linting
• 快速修复

ESLint 为许多代码编辑器提供了 集成。如果您在 ESLint 配置中安装了 eslint-plugin-lit for ESLint，您的 IDE 将显示 Lit 特定的错误和警告。

请参阅 awesome-lit-html 仓库以了解其他 IDE 插件，以及其他工具和信息。

编辑此页面