为何连接Three.js时出现模块解析错误？非全浏览器触发

在使用Three.js时遇到以下错误（并非所有浏览器都会触发）：

未捕获错误：模块标识符“three”无法解析。相对链接必须以“/”、“./”或“../”开头。

现有模块连接代码：

<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.138.0/build/three.module.js",
            "OrbitControls": "https://unpkg.com/three@0.138.0/examples/jsm/controls/OrbitControls.js",
            "GLTFLoader": "https://unpkg.com/three@0.138.0/examples/jsm/loaders/GLTFLoader.js"
        }
    }
</script>
<script src="./assets/js/main.js" type="module"></script>

main.js开头代码：

import * as THREE from 'three';
import {GLTFLoader} from "GLTFLoader";
import {OrbitControls} from "OrbitControls";

错误核心是浏览器不支持Import Maps特性。Import Maps是ES模块的扩展特性，允许通过别名简化模块导入路径，但并非所有浏览器都实现了该功能——旧版本的Chrome、Firefox，部分移动端浏览器会无法识别<script type="importmap">标签，导致无法解析'three'这类别名，只能识别以/、./或../开头的相对/绝对路径。

有两种可靠的处理方案：

方案一：添加Import Maps兼容补丁 #

引入polyfill脚本，让不支持Import Maps的浏览器也能识别别名配置，需将补丁放在importmap标签之前：

<!-- 引入兼容补丁 -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.138.0/build/three.module.js",
            "OrbitControls": "https://unpkg.com/three@0.138.0/examples/jsm/controls/OrbitControls.js",
            "GLTFLoader": "https://unpkg.com/three@0.138.0/examples/jsm/loaders/GLTFLoader.js"
        }
    }
</script>
<script src="./assets/js/main.js" type="module"></script>

方案二：直接使用完整路径导入 #

放弃Import Maps，在main.js中直接写入模块的完整URL，跳过别名解析步骤：

import * as THREE from 'https://unpkg.com/three@0.138.0/build/three.module.js';
import {GLTFLoader} from "https://unpkg.com/three@0.138.0/examples/jsm/loaders/GLTFLoader.js";
import {OrbitControls} from "https://unpkg.com/three@0.138.0/examples/jsm/controls/OrbitControls.js";

这种方式无需依赖额外特性，所有支持ES模块的浏览器都能正常运行。

内容的提问来源于stack exchange，提问作者Pavel Antonov