当部分JS文件无有效相对引用符号时，如何使用importmap？

场景复现 #

我用简单的index.html通过unpkg加载vtk.js，代码如下：

<html>
 <body>
  <script src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"></script>
  <script type="importmap">
    {
        "imports": {
            "vtk/": "https://unpkg.com/vtk.js/"
        }
    }
  </script>
  <script type="module">
   import 'vtk/Sources/favicon';
   import 'vtk/Sources/Rendering/Profiles/Geometry';
  </script>
 </body>
</html>

错误信息 #

浏览器控制台报错：

Uncaught TypeError: Failed to resolve module specifier "vtk.js/Sources/Rendering/OpenGL/Profiles/Geometry". Relative references must start with either "/", "./", or "../".

其中vtk/Sources/favicon导入正常，但vtk/Sources/Rendering/Profiles/Geometry导入失败。

问题根源 #

查看vtk.js源码发现，Geometry.js内部的导入语句使用了非相对路径的模块名：

import 'vtk.js/Sources/Rendering/OpenGL/Profiles/Geometry';
import 'vtk.js/Sources/Rendering/WebGPU/Profiles/Geometry';

而我配置的importmap只映射了vtk/前缀，浏览器无法识别vtk.js/开头的模块名，导致解析失败。

解决办法 #

既然无法修改第三方源码，只需在importmap中新增vtk.js/的映射规则，让浏览器能正确解析这类模块名：

<script type="importmap">
  {
      "imports": {
          "vtk/": "https://unpkg.com/vtk.js/",
          "vtk.js/": "https://unpkg.com/vtk.js/"
      }
  }
</script>

这样所有以vtk.js/开头的导入都会被映射到unpkg上的vtk.js对应文件路径，就能解决模块解析失败的问题。

注：我知道官方推荐将vtk.js与应用打包，目前也打算安装本地包，但这个方案可以满足快速原型开发时通过CDN加载的需求。

内容的提问来源于stack exchange，提问作者Dave Mackey