文章目录
- 前言
- 一、错误情况
- 1.three引入
- 2.gsap引入
- 二、解决办法
- 总结
前言
JS抽离, 引入three模块.
LiveServer报错:
Uncaught TypeError: Failed to resolve module specifier "three".
Relative references must start with either "/", "./", or "../".
事实上我已经数不清这是第多少次遇到这种问题了, 用HTML文档写一些库的案例, 然后各种引入报错, 找不到包之类.
只是这次的问题解决让我印象颇深, 也收获颇丰.
一、错误情况
1.three引入
html:
<script src="./js/main.js" type="module"></script>
JavaScript:
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
2.gsap引入
没有在html文档做操作, 直接npm下包在js文件引入:
import gsap from 'gsap';
结果就是两个都没能成功引入.
二、解决办法
路径没有写错, 只能说打包之后路径错误找不到某个模块了.
当导入JavaScript模块时, import语句和import()运算符都有一个"模块标识符", 其指示要导入的模块. 浏览器根据此标识符解析出绝对路径, 才能成功导入.
导入映射（import map）是一个 JSON 对象, 其允许开发者在导入 JavaScript 模块时, 控制浏览器如何解析模块标识符. 它提供了在 import 语句或 import() 运算符中用作模块标识符的文本, 其会在解析标识符时与要替换的文本之间建立映射.
在HTML文件增加以下来协助浏览器正确解析模块标识符, 这段代码可以在three.js源码的example任意一个案例中找到.
第一个映射修正three模块的路径, 第二个修正OrbitControls等附加模块的路径.
<script type="importmap">
{
"imports": {
"three": "../../node_modules/three/build/three.module.js",
"three/addons/": "../../node_modules/three/examples/jsm/"
}
}
</script>
three的引入问题在于路径错误, LiveServer最后是需要找到three.module.js, three的其他附加模块需要找到jsm.
OrbitControls这种不在three.module.js内的模块导入, 可以在不配置importmap内three/addons/的情况下:
import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls.js';
实际上就是把importmap里的内容直接写到了js里.
但是对于three.module.js这种一次性导出多个类的文件就只能写在importmap里了.
gsap引入失败的问题在于HTML文档里是不能直接这样:
import gsap from 'gsap';
引入使用的.
需要先配置importmap:
<script type="importmap">
{
"imports": {
"gsap": "../../node_modules/gsap/index.js"
}
}
</script>
然后再:
import { gsap } from 'gsap';
路径不固定, 只要引导到index.js即可.
或者不配置importmap, 直接js文件里这样写:
import { gsap } from '../../node_modules/gsap/index.js';
总结
–
