导入映射

ESM 脚本可以通过 Import Map 控制模块说明符解析，定义别名或重映射路径，使导入更简洁灵活，尤其适合共享库和内部工具。

例如，原本需要写：

import config from '../../../utils/config.js';

通过导入映射可简化为：

import config from 'utils/config.js';

创建导入映射

在 Settings 中找到 Import Map，点击 Create Default，编辑器会创建资源并分配到项目。

在代码编辑器打开。若将 /utils/math.mjs 映射为 math，可修改为：

{
  "imports": {
    "math": "./utils/math.mjs"
  }
}

之后 import x from "math" 就会解析到该模块。

AI

别名目标 API 变化时，可让 AI 助手通过 VS Code 扩展 Pull/Push 模式，按语义修改映射和依赖代码，同步前审查差异。

提示

也可作为 npm 包简写，例如 "tweenjs": "https://esm.sh/tween.js" 指向 CDN 上的 tween.js。

注意事项

• 仅适用于 ESM 构建，单独的经典脚本不支持。
• 路径必须对应项目已有文件或有效外部 URL。
• 同一时刻只能有一份活动映射。
• CDN 等外部模块必须兼容 ESM，并允许 CORS 访问。

适用场景

• 避免大型项目中脆弱的相对路径。
• 为共享工具提供简洁别名。
• 无需本地安装即可引用第三方模块。

导入映射有助于在项目增长时保持代码结构清晰、便于维护。