JavaScript 导入映射现已获得跨浏览器支持
使用集合保持井井有条根据您的偏好保存内容并进行分类。

借助导入映射，导入 ES 模块变得更加出色。

Thomas Steiner

ES 模块是在 Web 应用程序中包含和重用 JavaScript 代码的现代方式。它们受现代浏览器支持，并且比旧的、非模块化的 JavaScript 开发方法具有多项优势。

使用 ES 模块的一种现代方法是使用 <script type="importmap"> 标记。此标记允许您定义外部模块名称到其对应 URL 的映射，这使得在您的代码中包含和使用外部模块变得更加容易。

要使用 <script type="importmap"> 方法，您首先需要将其添加到 HTML 文档的 <head> 部分。在标记内，您可以定义一个 JSON 对象，该对象将模块名称映射到其对应的 URL。例如

<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>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>

使用 <script type="importmap"> 标记和 import 关键字比旧的、非模块化的 JavaScript 开发方法具有多项优势。它允许您清晰且明确地指定您的代码所依赖的外部模块，这使得理解和维护您的代码变得更加容易。总的来说，将 ES 模块与 <script type="importmap"> 标记结合使用是在 Web 应用程序中包含和重用 JavaScript 代码的一种现代且强大的方法。您可以按如下方式进行功能检测支持

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

浏览器支持

来源

JavaScript 导入映射现已获得跨浏览器支持 使用集合保持井井有条 根据您的偏好保存内容并进行分类。

延伸阅读

JavaScript 导入映射现已获得跨浏览器支持
使用集合保持井井有条根据您的偏好保存内容并进行分类。