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

有了匯入對應，匯入 ES 模組現在變得更加容易。

Thomas Steiner

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" 的單一外部模組，並將其對應至 unpkg CDN 上代管的 browser-fs-access 程式庫網址。完成對應後，您現在可以使用 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.
}

Browser Support

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

Source

延伸閱讀