此页面由 Cloud Translation API 翻译。

现在支持跨浏览器导入 JavaScript 地图

借助 import map，导入 ES 模块现在变得更好。

Thomas Steiner

ES 模块是一种在 Web 应用中包含和重复使用 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 关键字具有多项优势。它可让您清晰明确地指定代码所依赖的外部模块，从而更轻松地理解和维护您的代码。总体而言，使用带有 <script type="importmap"> 标记的 ES 模块是一种在 Web 应用中添加和重复使用 JavaScript 代码的新方式且功能强大的方法。您可以按如下方式检测支持情况：

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

浏览器支持

89
89
108
16.4

现在支持跨浏览器导入 JavaScript 地图

深入阅读