JavaScript 的 import maps 现在已经得到了跨浏览器的支持。

使用 import maps，导入 ES 模块变得更好了许多。

这个 Web 功能现在在所有三个浏览器引擎中都可用了！ES 模块是一种现代的方式，用于在 Web 应用程序中包含和重复使用 JavaScript 代码。它们得到现代浏览器的支持，并且相对于旧的、非模块化的 JavaScript 开发方法提供了几个优点。

一种使用 ES 模块的现代方式是使用

要使用

<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 库的 URL。通过这种映射，您现在可以使用 import 关键字将 browser-fs-access 库包含在您的代码中。请注意，import 关键字仅在带有 type="module" 属性的 script 标签内可用。

<button>选择文本文件</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>

使用

if (HTMLScriptElement.supports('importmap')) {
// 支持 importmap 功能。
}

浏览器支持情况：chrome89+、safari108、edge89+、firefox16.4