Sourcegraph 之外:import maps(导入映射)

导入映射(Import Maps)是一种浏览器原生机制,用于在网页中把 JavaScript 原生模块的裸导入名称映射到实际的资源地址。它让开发者能像在打包环境里那样,用简洁的包名而非完整路径来引入模块。

概述

浏览器原生的 ES 模块要求导入路径必须是明确的相对或绝对地址,不能直接写成一个裸包名。这与打包工具生态中习惯的写法不一致。导入映射通过在页面中声明一段 JSON 配置,告诉浏览器某个名称应解析到哪个地址,从而在不引入打包器的情况下也能使用清晰的模块名。

核心原理

• 在页面里用特定类型的脚本标签写入一段 JSON,其中 imports 字段列出名称到地址的对应关系。
• 浏览器解析模块导入时,先查映射表:命中则替换为映射地址,未命中再按常规规则解析。
• 支持前缀映射,可将一整个目录名称批量指向某个路径前缀,便于组织多文件模块。
• 还支持按作用域覆盖,让不同路径下的同名依赖解析到不同版本,解决版本共存问题。

应用场景

导入映射适合无构建或轻构建的场景,例如快速原型、教学演示、小型工具页,以及直接从 CDN 引入依赖的项目。它也让升级依赖变得简单:只需改动映射中的地址即可全局切换版本,无需重新打包。在一些追求极简工程链路的现代方案中,它与原生模块、HTTP 缓存配合,构成了免打包的开发思路。

常见问题

问:有了导入映射还需要打包工具吗?答:视规模而定。小型项目可完全依赖它免去打包;但大型项目仍需打包工具做代码分割、压缩、Tree Shaking 等优化,导入映射并不能替代这些能力。

问:一个页面能有多份导入映射吗?答:通常一个文档以合并后的映射为准,建议集中声明。过去规范限制较严,现代浏览器逐步支持多份映射的合并,但为避免混乱,实践上仍推荐统一管理。