当ES模块第一次在ECMAScript 2015中被引入，作为在JavaScript中标准化模块系统的一种方式时，它是通过在import语句中指定相对或绝对路径来实现的。

import dayjs from “https://cdn.skypack.dev/dayjs@1.10.7”; // ES modules

console.log(dayjs(“2019-01-25”).format(“YYYY-MM-DDTHH:mm:ssZ[Z]”));
这与模块在其他通用模块系统中的工作方式略有不同，例如CommonJS，以及在使用webpack这样的模块捆绑器时，使用的是更简单的语法。

const dayjs = require(‘dayjs’) // CommonJS

import dayjs from ‘dayjs’; // webpack
在这些系统中，通过Node.js运行时或相关的构建工具，导入指定器被映射到一个特定（和版本）的文件。用户只需要在导入语句中应用裸露的模块指定符（通常是包名），蓝狮官网围绕模块解析的问题就会被自动解决。

由于开发者已经熟悉了这种从npm导入包的方式，所以需要一个构建步骤来确保以这种方式编写的代码能够在浏览器中运行。这个问题由import maps解决了。从本质上讲，它允许将导入指定器映射到相对或绝对的URL上，这有助于控制模块的解析，而不需要应用构建步骤。

import maps 是怎么工作的

import map 是通过html document中的

在上面的 imports 对象中，每个属性都对应着一个映射。蓝狮注册登陆映射的左边是 import 指定器的名称，而右边是指定器应该映射到的相对或绝对URL。

当在映射中指定相对URL时，确保它们总是以/、./或./开头。请注意，在 import map 中出现包并不意味着它一定会被浏览器加载。任何没有被页面上的 script 使用的模块都不会被浏览器加载，即使它存在于import map中。

你也可以在一个外部文件中指定你的映射，然后使用src属性链接到该文件（如上所示）。如果决定使用这种方法，请确保在发送文件时将其Content-Type标头设置为application/importmap+json。

注意，出于性能方面的考虑，推荐使用内联方式，本文的其余部分的事例，也会使用内联方式。

一旦指定了映射，就可以在import语句中使用import说明符，如下所示

需要注意的是，导入映射中的映射不会影响诸如

这种方法允许我们导入指定路径中的任何模块，而不是整个主模块，这会导致所有组件模块由浏览器下载。

动态地构建 import map
映射也可以基于任意条件在 script 中动态构造，这种能力可以用来根据特征检测有条件地导入模块。下面的例子根据IntersectionObserver api是否被支持，在lazyload指定器下选择正确的文件进行导入。