一、引入
首先我们需要利用script标签,添加type为importmap。在其内部,添加需要引入的工具包。在将其放在head标签后边。例:
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@v0.149.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@v0.149.0/examples/jsm/"
}
}
</script>
二、使用
在main.js当时使用引入的工具包。
import * as THREE from 'three';
console.log(THREE);
三、启动服务
首先需要电脑已经安装好node。然后在html目录下运行
npx serve
运行成功:
四、完成代码
index.html
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@v0.149.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@v0.149.0/examples/jsm/"
}
}
</script>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
main.js
import * as THREE from 'three';
console.log(THREE);
运行成功: