ThreeJS项目构建失败：无法解析three/addons/capabilities/WebGL.js

方案1：通过three-stdlib导入WebGL模块 #

你已安装three-stdlib，它封装了ThreeJS官方的addons（原examples/jsm内容），直接修改导入语句：

// 替换原来的导入行
import { WebGL } from 'three-stdlib/addons/capabilities/WebGL.js';

方案2：直接使用ThreeJS官方正确路径导入 #

如果不想依赖three-stdlib，ThreeJS的addons实际存放在three/examples/jsm/目录下，调整导入路径：

import { WebGL } from 'three/examples/jsm/capabilities/WebGL.js';

注意：确保你的ThreeJS版本在r127及以上（支持ES模块结构），可通过npm list three查看版本。

方案3：配置Parcel别名强制路径映射 #

如果上述方案仍无效，在项目根目录的package.json中添加别名配置，让Parcel正确识别three/addons的指向：

{
  "alias": {
    "three/addons": "three/examples/jsm"
    // 若使用three-stdlib，可替换为："three/addons": "three-stdlib/addons"
  }
}

额外验证步骤 #

• 清理Parcel缓存：删除项目根目录下的.parcel-cache和dist文件夹，重新执行npm start。
• 检查版本兼容性：确保three和three-stdlib版本一致，避免因版本差异导致文件结构不匹配。

内容的提问来源于stack exchange，提问作者Amit Kumar Jha