需求

為了使用各種瀏覽器和工具，關於 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 並載入 Polyfill。

本頁概述如何在您的開發和生產環境中滿足這些需求。

請參閱 開發、測試 和 建置生產環境，以取得符合這些需求的工具和組態建議。

在現代瀏覽器上使用 Lit 唯一需要的轉換是將裸模組指定符轉換為與瀏覽器相容的 URL。

Lit 使用裸模組指定符來匯入其子套件之間的模組，如下所示

import {html} from 'lit-html';

現代瀏覽器目前僅支援從 URL 或相對路徑載入模組，而不支援參照 npm 套件的裸名稱，因此建置系統需要處理它們。這應該透過將指定符轉換為適用於瀏覽器中 ES 模組的指定符，或產生不同類型的模組作為輸出來完成。

Webpack 會自動處理裸模組指定符；對於 Rollup，您需要一個外掛程式 (@rollup/plugin-node-resolve)。

為什麼使用裸模組指定符？ 裸模組指定符可讓您匯入模組，而無需確切知道套件管理員將它們安裝在何處。名為 匯入對應 的標準提案開始推出，這將讓瀏覽器支援裸模組指定符。同時，裸匯入指定符可以輕鬆地作為建置步驟進行轉換。還有一些 Polyfill 和模組載入器支援匯入對應。

所有現代瀏覽器都會自動更新，使用者很可能擁有最新版本。Lit 和相關函式庫會在 Chromium、Safari 和 Firefox 的目前版本，以及 Chromium 和 Safari 的兩個主要先前版本，以及 Firefox 的擴展支援版本 (ESR) 上進行測試。舊版本可能仍然可以使用，但將盡力而為，不作保證。

Lit 3 未在舊版瀏覽器上進行測試，特別是不支援 Internet Explorer 11 和傳統 Edge，因為它們存在非標準 DOM 行為。如果您必須支援舊版瀏覽器，請考慮使用 Lit 2 以及其他編譯和/或 Polyfill，如 為舊版瀏覽器建置 中所述。

編輯此頁面