開發

在專案的開發階段，當您正在撰寫 Lit 元件時，下列工具可以幫助您提高生產力

• 一個開發伺服器，用於預覽程式碼而無需建置步驟。
• TypeScript，用於撰寫經過類型檢查的程式碼。
• 一個程式碼檢查器，用於捕捉 Javascript 錯誤。
• 一個程式碼格式化工具，用於一致地格式化程式碼。
• Lit 專用 IDE 外掛程式，用於檢查程式碼及語法醒目顯示 Lit 範本。

查看入門套件文件，以輕鬆設定具有所有預先設定功能的開發環境。

所有 Lit 套件都使用 Node 對匯出條件的支援，發佈開發版本和生產版本。

生產版本使用非常激進的縮減設定進行最佳化。開發版本未經縮減，以便於除錯，並包含額外的檢查和警告。預設版本是生產版本，這樣專案就不會意外部署較大的開發版本。

您必須在支援匯出條件的工具中指定 "development" 匯出條件，例如 Rollup、Webpack 和 Web Dev Server，才能選擇開發版本。每個工具的做法都不同。

例如，在 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。在這種情況下，可以忽略警告。

如果您看到 Multiple versions of Lit loaded 開發模式警告，您可以嘗試幾件事

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 將核心 Lit 套件的特定版本安裝為您專案的直接相依性，來促使 npm 提升這些版本。將 latest 替換為您想要移除重複的版本。

5. 如果仍然有重複，您可能需要刪除您的套件鎖定檔和 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 元件 polyfill。您需要設定 @web/dev-server-legacy 套件才能支援較舊的瀏覽器。

安裝 Web Dev Server 舊版套件

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，以及 Rollup、Vite 或 Webpack 等 TypeScript 包裝器，以及像 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 的 eslint-plugin-lit，它為 Lit 的 HTML 範本提供程式碼檢查，包括常見的 HTML 程式碼檢查加上 Lit 特有的規則。

將程式碼檢查整合到您的 IDE 工作流程中，可以幫助您儘早發現錯誤。請參閱Lit 特有的 IDE 外掛程式，以設定您的 IDE 以使用 Lit。

使用程式碼格式化工具可以幫助確保程式碼一致且易於閱讀。將您選擇的格式化工具與 IDE 整合，可以確保您的程式碼始終保持整潔。

幾個常見的選項包括

• Prettier: VS Code 外掛程式
• Beautifier: VS Code 外掛程式
• Clang: VS Code 外掛程式

在開發 Lit 時，有許多 IDE 外掛程式可能會很有用。特別是，我們建議使用可與 Lit 範本搭配使用的語法螢光筆。

lit-plugin 為 Lit 範本提供語法螢光標示、類型檢查等功能。適用於 VS Code，或者您可以使用與 Sublime Text 和 Atom 搭配使用的 ts-lit-plugin TypeScript 編譯器外掛程式。

lit-plugin 和 ts-lit-plugin 提供

• 語法螢光標示
• 類型檢查
• 程式碼完成
• 滑鼠懸停文件
• 跳至定義
• 程式碼檢查
• 快速修正

ESLint 針對許多程式碼編輯器有整合。如果您在您的 ESLint 設定中安裝了適用於 ESLint 的 eslint-plugin-lit，您的 IDE 將會顯示 Lit 特有的錯誤和警告。

請參閱 awesome-lit-html 儲存庫以取得其他 IDE 外掛程式，以及其他工具和資訊。

編輯此頁面