借助导入映射，现在导入 ES 模块变得更加简单。
ES 模块是一种在 Web 应用中包含和重复使用 JavaScript 代码的现代方式。现代浏览器支持这些模块，并且与旧的非模块化 JavaScript 开发方法相比，具有多项优势。
使用 ES 模块的现代方式是使用 <script type="importmap"> 标记。借助此标记，您可以定义外部模块名称与其对应网址之间的映射，从而更轻松地在代码中添加和使用外部模块。
如需使用 <script type="importmap"> 方法，您首先需要将其添加到 HTML 文档的 <head> 部分。在该标记中，您可以定义一个 JSON 对象，用于将模块名称映射到其对应的网址。例如：
<script type="importmap"> { "imports": { "browser-fs-access": "https://unpkg.com/[email protected]/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"> 标记搭配使用是一种现代且强大的方式，可在 Web 应用中包含和重复使用 JavaScript 代码。您可以按如下方式进行功能检测支持：
if (HTMLScriptElement.supports('importmap')) { // The importmap feature is supported. }