开发

在项目的开发阶段，当你编写 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';

// 在所有 ReactiveElement 上关闭迁移警告，
// 包括 LitElement
ReactiveElement.disableWarning?.('migration');

// 在所有 LitElement 上关闭更新警告
LitElement.disableWarning?.('change-in-update');

// 在单个元素上关闭更新警告
MyElement.disableWarning?.('change-in-update');

你也可以通过定义 static enabledWarnings 属性来控制单个类内的警告：

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

为了代码体积考虑，最好在你自己的生产环境构建中消除控制警告的代码。

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 Components polyfill。你需要配置 @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: [
    // 确保此插件始终放在最后
    legacyPlugin({
      polyfills: {
        webcomponents: true,
        // 将 Lit 的 polyfill-support 模块注入到测试文件中，
        // 这是与 webcomponents polyfill 交互所必需的
        custom: [
          {
            name: 'lit-polyfill-support',
            path: 'node_modules/lit/polyfill-support.js',
            test: "!('attachShadow' in Element.prototype)",
            module: false,
          },
        ],
      },
    }),
  ],
};

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

TypeScript 通过添加类型支持扩展了 JavaScript 语言。类型有助于提前捕获错误并使代码更具可读性和可理解性。

在你的项目中安装 TypeScript：

npm install typescript --save-dev

构建代码：

npx tsc --watch

有关完整的安装和使用说明，请参阅 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，它为 Lit 的 HTML 模板提供代码检查，包括常见的 HTML 检查以及 Lit 特定的规则。

将代码检查集成到你的 IDE 工作流中可以帮助尽早捕获错误。请参阅 Lit 特定的 IDE 插件来为你的 IDE 配置 Lit。

使用代码格式化工具可以帮助确保代码的一致性和可读性。将你选择的格式化工具与 IDE 集成可以确保你的代码始终保持整洁。

一些流行的选择包括：

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

有许多 IDE 插件在使用 Lit 开发时可能会很有用。特别是，我们推荐使用一个能与 Lit 模板配合的语法高亮器。

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

lit-plugin 和 ts-lit-plugin 提供：

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

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

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