JavaScript ES6 importmap详解

importmap是一种针对web页面去控制imports行为的新方式，潜在地可以使你摈弃掉你的构建系统。

当Es modules在Ecmascript 2015中第一次被引进并作为标准化js模块系统的一种方式，它是通过在import语句中强制指定相对或绝对路径来实现的。

ES6 案例参考：

import dayjs from "https://cdn.skypack.dev/dayjs@1.10.7"; // ES modules
console.log(dayjs("2024-01-25").format("YYYY-MM-DDTHH:mm:ssZ[Z]"));

执行结果：

这与其他的通用模块系统（像是CommonJs）的工作模式有细微的差别，并且在使用类似webpack的模块bunlder时使用了更简单的语法：

const dayjs = require('dayjs') // CommonJS
import dayjs from 'dayjs'; // webpack

说人话就：是 importmap 给你创建了一个快捷键地址，或者用Linux的软连接功能相似。

importmap的使用方式

<div style="margin-bottom:10px;">
    <label>时间解析结果：</label><span id="time"></span>
</div>

<script type="importmap">
    {
     "imports": {
       "dayjs": "https://cdn.skypack.dev/dayjs@1.10.7"
     }
    }
</script>
<script type="module">
    import dayjs from "https://cdn.skypack.dev/dayjs@1.10.7"; // ES modules
    let result = dayjs("2024-01-25").format("YYYY-MM-DDTHH:mm:ssZ[Z]");
    let $time = document.querySelector('#time');
    $time.innerHTML = result;
</script>

importmap是通过HTML文档中的

在script标记中，JSON对象用于为文档中脚本所需的模块指定所有必要的映射。典型importmap的结构如下所示：
<script type="importmap">
{
 "imports": {
   "react": "https://cdn.skypack.dev/react@17.0.1",
   "react-dom": "https://cdn.skypack.dev/react-dom",
   "square": "./modules/square.js",
   "lodash": "/node_modules/lodash-es/lodash.js"
 }
}
</script>

<script type="importmap" src="importmap.json"></script>

指定mapping后，可以在import语句中使用import说明符，如下所示：

<script type="module">
 import { cloneDeep } from 'lodash';
 const objects = [{ a: 1 }, { b: 2 }];
 const deep = cloneDeep(objects);
 console.log(deep[0] === objects[0]);
</script>

应该注意，import map中的映射不会影响URL，例如＜script＞标记的src属性。因此，如果您使用类似

将说明符映射到整个包

除了将说明符映射到模块之外，还可以将一个说明符映射到包含多个模块的包。这是通过使用以斜杠结尾的说明符键和路径来完成的。

<script type="importmap">
{
 "imports": {
   "lodash/": "/node_modules/lodash-es/"
 }
}
</script>

此操作允许您导入指定路径中的任何模块，而不是整个主模块，这将导致浏览器下载所有组件模块。

<script type="module">
 import toUpper from 'lodash/toUpper.js';
 import toLower from 'lodash/toLower.js';
 console.log(toUpper('hello'));
 console.log(toLower('HELLO'));
</script>

动态构建importmap

映射也可以基于任意条件在脚本中动态构建，并且该功能可以用于基于特征检测有条件地导入模块。下面的示例根据IntersectionObserver API是否受支持，选择要在lazyload说明符下导入的正确文件。

<script>
 const importMap = {
   imports: {
     lazyload: 'IntersectionObserver' in window
       ? './lazyload.js'
       : './lazyload-fallback.js',
   },
 };
 const im = document.createElement('script');
 im.type = 'importmap';
 im.textContent = JSON.stringify(importMap);
 document.currentScript.after(im);
</script>

<script type="importmap">
 {
   "imports": {
     "post.js": "./static/dist/post.bundle.8cb615d12a121f6693aa.js",
   }
 }
</script>

相较于如下的书写方式：

import { something } from './static/dist/post.bundle.8cb615d12a121f6693aa.js'

你可以像下面这样写：

import { something } from 'post.js'

当更新文件时，只需要更新import map。由于对其导出的引用没有更改，因此由于hash变化而更新的脚本再次下载时，它们将保持缓存在浏览器中。

<script type="importmap">
 {
   "imports": {
     "post.js": "./static/dist/post.bundle.6e2bf7368547b6a85160.js",
   }
 }
</script>

使用同一个模块的不同版本

在importmap中使用同一个模块的不同版本是很容易的一件事，你只需要在mapping中申明不同的说明符即可，像这样：

<script type="importmap">
 {
   "imports": {
     "lodash@3/": "https://unpkg.com/lodash-es@3.10.1/",
     "lodash@4/": "https://unpkg.com/lodash-es@4.17.21/"
   }
 }
</script>

你同样可以通过不同作用域来设定同一个说明符作为同一个包的不同版本，这允许您在给定范围内更改import说明符的含义。

<script type="importmap">
 {
   "imports": {
     "lodash/": "https://unpkg.com/lodash-es@4.17.21/"
   },
   "scopes": {
     "/static/js": {
       "lodash/": "https://unpkg.com/lodash-es@3.10.1/"
     }
   }
 }
</script>

if (HTMLScriptElement.supports && HTMLScriptElement.supports('importmap')) {
 // import maps is supported
}

JavaScript ES6 importmap

http://blog.xqlee.com/article/2408051059449542.html