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

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

使用 ES 模块的一种现代方法是使用标记。此标记允许您定义外部模块名称到其相应 URL 的映射，这样可以更轻松地在代码中包含和使用外部模块。<script type="importmap">

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


<script type="importmap">
  {
    
    
    "imports": {
    
    
      "browser-fs-access": "https://unpkg.com/[email protected]/dist/index.modern.js"
    }
  }
</script>

此代码定义一个名为的单个外部模块，并将其映射到托管在 unpkg CDN 上的浏览器 fs 访问库的 URL。完成此映射后，您现在可以使用该关键字在代码中包含浏览器 fs 访问库。请注意，关键字仅在具有该属性的标记中可用。"browser-fs-access"importimportscripttype="module"


<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 开发方法相比，使用标签和关键字提供了几个好处。它允许您清晰明确地指定代码所依赖的外部模块，从而更轻松地理解和维护代码。总的来说，使用带有标签的 ES 模块是在 Web 应用程序中包含和重用 JavaScript 代码的一种现代而强大的方式。您可以按如下方式检测支持：<script type="importmap">import<script type="importmap">

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

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

猜你喜欢