既然import maps are supported throughout all browsers，Web开发已经迈出了很大的一步。
我们可以像2015年一样开始编写Web应用程序！所需的只是几个映射的进口，我们已经关闭了！
什么是导入地图？
根据MDN：
导入映射是一个JSON对象，它允许开发人员控制浏览器在导入JavaScript模块时如何解决模块指定器。
它提供了用作导入语句或import（）运算符中的模块指定符的文本与相应的值之间的映射，该值将在解决指定时替换文本的相应值。
JSON对象必须符合导入地图JSON表示格式。
这意味着我们可以具有以下形状的代码：
import "@shoelace-style/shoelace/dist/components/button/button.js";
const HomeView = html`
<sl-button variant="primary"></sl-button>
`;
，不必构建/捆绑来！
等等，怎么样？
好吧，这是很领先的，但是...ð¥import Maps！
设置
要开始使用导入地图，您可以启动一个新项目或开始使用现有的项目。我决定研究一个我一直在从事的项目。
该项目是我们公司的内部工具，具有以下依赖性：
{
"dependencies": {
"@shoelace-style/shoelace": "^2.3.0",
"lit": "^2.7.0",
"suunta": "file:../../suunta"
}
}
正如我们所看到的，我们有两个外部依赖关系和一个内部工具。以现代化的方式包装我们的应用程序，我们当然需要打包该项目
使用一些像ESBuild或Rollup这样的Bundler。但是有了进口地图，我们可以利用CDN来交付我们的软件包并完全
消除捆绑步骤。
html侧
导入地图是在我们的HTML结构内部创建的，以我们的常规脚本导入的方式相似。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Import Map Demo</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="./src/css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/themes/light.css" />
<script type="importmap">
{
"imports": {
"lit": "https://esm.run/lit",
"@shoelace-style/shoelace": "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0",
"@shoelace-style/shoelace/": "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/",
"suunta": "/node_modules/suunta/dist/main.js"
}
}
</script>
</head>
<body>
<main></main>
<app-navigation></app-navigation>
<script type="module" src="./src/index.js"></script>
</body>
</html>
我们感兴趣的部分是head元素内部的script标签。它具有称为importmap的新类型属性。这就是我们能够与
交流的方式
我们想将此脚本用作导入地图JSON条目的浏览器。
看条目的内部，我们可以看到我们的所有依赖项都有映射。我们的大多数条目都用一个条目映射，但有时我们可能想访问
我们依赖的子文件夹。在这些情况下
请注意，您可以将多个CDN甚至本地文件系统用于导入！
JS方
那在JS侧看起来如何？出色地。正如我们之前讨论的那样，导入地图允许您使用依赖项，就好像您在捆绑它们一样。
这意味着，如果您使用导入地图正确设置了所有内容，那么在最佳情况下，您不必做任何任何JavaScript更改！那不是很棒！
一些将军的人
警惕包装
CDN今天非常先进，可能会以不同格式打包您的包装。如果您通过unpkg和JSDelivr's ESM bundler查看相同的包裹，
您会看到输出不匹配。因此，如果一个CDN不适合您，有时会有另一个CDN。
代码完成不看云
即使我们正在使用CDN的依赖项开发，您的编辑也可能希望将这些文件在本地使用其数据完成，代码操作和一般语言支持信息。所以很好
练习以保持包裹。json最新和NPM也在本地安装包裹。
有些软件包可能需要一些额外的路径
对于某些可能会懒惰的资产加载部分的软件包，您可能需要配置一些额外的参数以使用导入地图支持其功能。
例如，鞋带的icons懒洋洋地从本地或CDN路线上加载，可能需要您
set the base path
所说的资产要从中加载。不过，此设置通常很小，不应该比单行更膨胀您的代码库。
结束
去查看导入地图，在项目中尝试一下，看看是否可以使您的项目变得无构建！使用平台！