HTML文档引入JS模块出现路径问题解决办法

前言

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';

总结

到此这篇关于HTML文档引入JS模块出现路径问题解决办法的文章就介绍到这了,更多相关HTML引入JS模块路径问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！