前言

JS抽離, 引入three模塊.

LiveServer報錯:

Uncaught TypeError: Failed to resolve module specifier "three".
Relative references must start with either "/", "./", or "../".

事實上我已經(jīng)數(shù)不清這是第多少次遇到這種問題了, 用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';

結(jié)果就是兩個都沒能成功引入.

二、解決辦法

路徑?jīng)]有寫錯, 只能說打包之后路徑錯誤找不到某個模塊了.

當導(dǎo)入JavaScript模塊時, import語句和import()運算符都有一個"模塊標識符", 其指示要導(dǎo)入的模塊. 瀏覽器根據(jù)此標識符解析出絕對路徑, 才能成功導(dǎo)入.

導(dǎo)入映射（import map）是一個 JSON 對象, 其允許開發(fā)者在導(dǎo)入 JavaScript 模塊時, 控制瀏覽器如何解析模塊標識符. 它提供了在 import 語句或 import() 運算符中用作模塊標識符的文本, 其會在解析標識符時與要替換的文本之間建立映射.

在HTML文件增加以下來協(xié)助瀏覽器正確解析模塊標識符, 這段代碼可以在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的其他附加模塊需要找到j(luò)sm.
OrbitControls這種不在three.module.js內(nèi)的模塊導(dǎo)入, 可以在不配置importmap內(nèi)three/addons/的情況下:

import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls.js';

實際上就是把importmap里的內(nèi)容直接寫到了js里.

但是對于three.module.js這種一次性導(dǎo)出多個類的文件就只能寫在importmap里了.

gsap引入失敗的問題在于HTML文檔里是不能直接這樣:

import gsap from 'gsap';

引入使用的.

需要先配置importmap:

<script type="importmap">
  {
    "imports": {
      "gsap": "../../node_modules/gsap/index.js"
    }
  }
</script>

然后再:

import { gsap } from 'gsap';

路徑不固定, 只要引導(dǎo)到index.js即可.

或者不配置importmap, 直接js文件里這樣寫:

import { gsap } from '../../node_modules/gsap/index.js';

總結(jié)

到此這篇關(guān)于HTML文檔引入JS模塊出現(xiàn)路徑問題解決辦法的文章就介紹到這了,更多相關(guān)HTML引入JS模塊路徑問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論