Import Mpas 目前已获得跨浏览器支持！

大家好，我是 ConardLi。

周末愉快，愚人节愉快！今天来看点轻松简单的消息吧。

在我们常见的模块化系统中，模块导入语句通过 Node.js 运行时或相关构建工具映射到特定（版本）的文件。用户只需要在 import 语句中直接编写模块说明符（通常是包名），模块就可以自动处理。

const dayjs = require('dayjs') // CommonJS

import dayjs from 'dayjs'; // webpack

由于我们已经熟悉了这种从 npm 导入包的方式，因此必须要先经过一个的构建步骤才能确保以这种方式编写的代码可以在浏览器中运行。

Import maps 就可以解决这个问题，它可以将模块说明符（包名）自动映射到它的相对或绝对路径。从而让我们不使用构建工具也能使用简洁的模块导入语法。

我们可以通过 HTML 中的 <script type="importmap"> 标签来指定一个 Import maps。

<script type="importmap">
{
  "imports": {
    "dayjs": "https://cdn.skypack.dev/dayjs@1.10.7",
  }
}
</script>

然后，我们就可以使用在 <script type="module"> 标签内使用 ES Module 规范去导入模块了：

<script type="module">
  import dayjs from 'dayjs';

  console.log(dayjs("2023-04-01").format("YYYY-MM-DD"));
</script>

随着 Safari 16.4 的发布，WebKit 引擎也支持了 Import Mpas。

至此， Import Mpas 已经获得了全部三大浏览器引擎（Blink、Gecko、WebKit）的支持。

在  Import Maps  刚刚被推出的时候，我之前的文章里已经详细介绍过它了，大家感兴趣可以阅读：

最后

本公众号回话也已经接入了 ChatGPT 欢迎大家体验。

参考：

• https://web.dev/import-maps-in-all-modern-browsers/

如果你想加入高质量前端、ChatGPT 交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。

点赞和在看是最大的支持⬇️❤️⬇️