javascript import maps 特性现已被全部主流浏览器支持

值得庆祝

Import maps 特性现在可以在全部三个主要浏览器内使用
现在主流现代web 应用引入和利用javascript 是通过 Es module 模块实现。在开发javascript上，比起无模块化功能的旧版浏览器，现代浏览器支持模块化且提供了许多好用的功能

引入 es module 使用 <script type=“importmap”> 标签这种新方式实现。这个标签允许你定义一个map映射外部模块名到它所对应的 URLs, 这使得它以更简便的方式引入外部模块到你的代码中。

使用 <script type="importmap"> 这种方式，你需要把它添加至 HTML document 的节点。在这个标签内你可以定义一个JSON 对象，它映射了模块名和模块名对应的模块URLs, 举个栗子:

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

例子上的代码定义了单个外部名为 “browser-fs-access” 模块，它映射到browser-fs-access 库对应的URL ，由 unpkg CDN 提供，有了这些映射，你现在就可以在你的代码中使用 import 关键字去引入 browser-fs-access 库。注意，import 关键字只在 <script type=“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>