如何不基于构建工具优雅的实现模块导入？

当 ES Module​ 最开始作为一种新的 JavaScript​ 模块化方案在 ES6​ 中被引入的候，其实是通过在 import 语句中强制指定相对路径或绝对路径来实现的。

import dayjs from "https://cdn.skypack.dev/dayjs@1.10.7"; // ES modules
console.log(dayjs("2022-08-12").format("YYYY-MM-DD"));

这和其他常见的模块化系统（例如 CommonJS​）的工作方式略有不同，并且在使用像 webpack 这样的模块打包工具的时候会使用更简单的语法：

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

import dayjs from 'dayjs'; // webpack

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

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

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

如何使用 Import maps

我们可以通过 HTML​ 中的