跨瀏覽器現在支援 JavaScript 匯入對應

有了匯入地圖,匯入 ES 模組的效率也大幅提升。

ES 模組是一種新式方式,可在網頁應用程式中加入及重複使用 JavaScript 程式碼。這些模組受到新版瀏覽器支援,相較於舊版非模組化 JavaScript 開發方法,可提供多項優點。

使用 ES 模組的現代化方式是使用 <script type="importmap"> 標記。這個標記可讓您定義外部模組名稱與其對應網址的對應關係,方便在程式碼中加入及使用外部模組。

如要使用 <script type="importmap"> 方法,您必須先將其新增至 HTML 文件的 <head> 區段。在標記中,您可以定義 JSON 物件,將模組名稱對應至相應的網址。例如:

<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>

這個程式碼定義了名為 "browser-fs-access" 的單一外部模組,並將其對應至 browser-fs-access 程式庫的網址 (由 unpkg CDN 代管)。有了這項對應項目,您現在可以使用 import 關鍵字,在程式碼中加入 browser-fs-access 程式庫。請注意,import 關鍵字僅適用於具有 type="module" 屬性的 script 標記。

<button>Select a text file</button>
<script type="module">
  import {fileOpen} from 'browser-fs-access';

  const button = document.querySelector('button');
  button.addEventListener('click', async () => {
    const file = await fileOpen({
      mimeTypes: ['text/plain'],
    });
    console.log(await file.text());
  });
</script>

與舊版非模組化的 JavaScript 開發方法相比,使用 <script type="importmap"> 標記和 import 關鍵字可帶來幾項好處。您可以明確指定程式碼所依賴的外部模組,讓程式碼更容易理解及維護。總體而言,使用 ES 模組搭配 <script type="importmap"> 標記,是一種在網頁應用程式中加入及重複使用 JavaScript 程式碼的現代化強大方法。您可以按照下列方式偵測支援功能:

if (HTMLScriptElement.supports('importmap')) {
  // The importmap feature is supported.
}

瀏覽器支援

  • Chrome:89。
  • Edge:89。
  • Firefox:108。
  • Safari:16.4。

延伸閱讀