如何在Go模板中使用npm安装的three.js模块？

问题根源 #

浏览器原生ES模块不支持直接使用three这类裸模块名，同时你的Go静态文件路由配置有误，加上路径拼写错误，导致无法定位到three.js的模块文件。

具体解决步骤 #

1. 修正Go静态文件路由配置
   把你原来的e.Static("/node", "node_modules")替换为：

   e.Static("/node_modules", "./node_modules")
   

   这个配置会让Go的Web框架（比如Echo）将本地node_modules目录映射为浏览器可访问的/node_modules路径，确保浏览器能请求到目录内的文件。

2. 使用正确的模块导入路径
   注意你之前的拼写错误：builld应为build，three.js的ES模块实际路径是node_modules/three/build/three.module.js，所以正确的导入代码是：

   import * as THREE from "/node_modules/three/build/three.module.js";
   

3. 可选：用导入映射简化导入语法
   如果不想每次写冗长的路径，可以在HTML的<head>中添加导入映射，让浏览器识别three这个裸模块名：

   <script type="importmap">
     {
       "imports": {
         "three": "/node_modules/three/build/three.module.js"
       }
     }
   </script>
   

   添加后，你就可以直接用import * as THREE from "three";导入模块，浏览器会自动解析到正确的文件路径。

4. 验证文件完整性
   确认本地node_modules/three/build/three.module.js文件存在，若npm安装过程有异常，可重新执行npm install three确保依赖安装完整。

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