ESModule在ES6中作为一种新的JavaScript模块化方案首次引入时，实际上是通过在import语句中强制使用相对或绝对路径来实现的。从“https://cdn.skypack.dev/dayjs@1.10.7”导入dayjs；//ES模块console.log(dayjs("2022-08-12").format("YYYY-MM-DD"));这与其他常见的模块化系统（例如CommonJS）的工作方式略有不同，并且在使用像webpack这样的模块打包器时使用更简单的语法：constdayjs=require('dayjs')//CommonJSimportdayjsfrom'dayjs';//webpack在这些系统中，模块导入语句通过Node.js运行时或相关构建工具映射到特定（版本）文件。用户只需在导入语句中直接写入模块说明符（通常是包名），模块即可自动处理。由于开发人员已经熟悉这种从npm导入包的方式，因此需要一个构建步骤来确保以这种方式编写的代码可以在浏览器中运行。导入映射可以解决这个问题，它可以自动将模块说明符（包名称）映射到它的相对或绝对路径。这允许我们在不使用构建工具的情况下使用简洁的模块导入语法。如何使用导入地图我们可以通过HTML中的为了成功导入它解析.此脚本标记必须放在文档中第一个在script标签里面，我们可以通过一个JSON对象来指定所有必要的映射文档中的脚本需要导入的模块。典型的importmap结构如下：在上面的导入对象中，每个属性对应一个映射。映射的左侧是导入说明符的名称（通常是包名），右侧是说明符需要映射到的相对或绝对路径。在映射中指定相对路径时，必须确保它们始终以/、../或./开头。另外，importmap中声明的包并不一定代表浏览器会加载。页面上脚本未使用的任何模块都不会被浏览器加载，即使您在importmap中声明了它。写好importmap后，就可以在后续的脚本中直接使用ESModule语法了。外部映射你也可以在外部文件中指定你的映射，然后使用脚本的src属性链接到这个文件（Content-TypeHeader必须设置为application/importmap+json才能正常加载）。但是尽量不要使用这种方式，因为它的性能比直接内联写法差。映射整个包除了将说明符映射到模块之外，您还可以将说明符映射到包含多个模块的包：这种写法可以直接导入指定路径下的任意模块。相应的，浏览器也会下载所有的组件模块。动态映射你也可以根据一些条件在脚本中加入动态映射，比如下面的例子我们导入不同的文件，通过判断是否有IntersectionObserverAPI:使用同一模块的不同版本使用importmap我们可以将不同版本的模块映射到不同的包名称：此外，还可以使用scopes实现对同一个包的不同模块进行更细粒度的版本控制：/static/js/static/js下的模块将使用3.10.1版本，其他模块将使用4.17.21版本兼容性项该技术目前在Chrome和Edge浏览器89及更高版本中完全支持，但暂不支持Firefox、Safari和部分手机浏览器。我们可以通过以下代码判断浏览器支持情况：if(HTMLScriptElement.supports&&HTMLScriptElement.supports('importmap')){//支持导入地图}对于不提供支持的浏览器，我们可以使用以下polyfill：https://github.com/guybedford/es-module-shims官方也推荐一些其他的与importmap相关的polyfills和工具：https://github.com/WICG/import-maps#community-polyfills-and-tooling
