526互联

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

发布时间 2023-04-25 16:31:30作者: 池中物sheldon

值得庆祝

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>

在开发javascript 时，比起无模块化功能的老旧浏览器上，新浏览器上 <script type="importmap"> 标签和 import 关键字提供了许多好处。它允许你将你代码中依赖的模块清晰分离特殊的外部模块，这使得你更容易理解和管理你的代码。总而言之，在web应用中 使用