ES Module Shims 中相对路径导入映射的注意事项

在使用 ES Module Shims 进行模块导入时，开发者可能会遇到相对路径导入映射失效的问题。本文将深入分析这一现象的原因，并提供正确的使用方法。

问题现象

当在 importmap 中使用相对路径（如 ./jquery.js）或绝对路径（如 /jquery）作为导入映射的键时，ES Module Shims 可能不会按预期工作。具体表现为：

1. 使用 ./jquery.js 作为导入映射键时，模块加载不会触发 shims 处理
2. 使用 /jquery 作为导入映射键时，同样会出现 shims 失效的情况
3. 只有使用裸说明符（如 jquery.js）时，shims 才能正常工作

技术原理

ES Module Shims 的工作原理是检测浏览器原生模块系统是否能够处理给定的导入语句。如果原生模块系统能够处理，shims 就不会介入；如果原生模块系统无法处理，shims 才会接管模块加载过程。

对于相对路径（如 ./module.js）和绝对路径（如 /module.js），浏览器原生模块系统会尝试直接加载这些路径，而不会触发"未解析"错误。因此，shims 不会介入处理这些导入。

解决方案

要确保 ES Module Shims 正确工作，必须使用裸说明符（bare specifier）作为导入映射的键。裸说明符是指不以 ./、../ 或 / 开头的模块标识符。

正确用法示例

<script type="importmap">
{
  "imports": {
    "jquery": "https://unpkg.com/jquery@3.7.1/dist/jquery.js"
  }
}
</script>
<script type="module">
  import "jquery";
  console.log($);
</script>

深入理解

1. 裸说明符的必要性：只有裸说明符在原生模块系统中会明确失败，从而触发 shims 的介入
2. 避免双重执行：这种设计可以防止模块在原生模块系统和 shims 中都被执行
3. 模块图中的任何失败点：只要模块依赖图中的任何地方使用了裸说明符或其他现代语法特性，整个模块图都会由 shims 处理

最佳实践

1. 始终使用裸说明符作为导入映射的键
2. 如果必须使用相对路径，确保模块依赖图中某处使用了裸说明符
3. 避免混合使用不同风格的模块标识符，保持一致性

通过遵循这些原则，开发者可以确保 ES Module Shims 在各种浏览器环境下都能可靠地工作。