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

借助导入映射,现在导入 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/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.
}

浏览器支持

  • Chrome:89。
  • Edge:89。
  • Firefox:108.
  • Safari:16.4。

深入阅读