使用mocha-webpack测试three.js代码时THREE未定义，如何解决？

这个问题本质是Three.js在Node环境下的模块导出逻辑导致的——当Webpack目标设为node时，Three.js不会自动把THREE挂载到全局对象（毕竟Node里没有浏览器的window），哪怕你的测试代码没直接写THREE，如果业务代码或测试逻辑间接依赖了全局THREE变量，就会触发这个错误。下面给你几个靠谱的解决办法：

1. 改用ES模块导入（推荐） #

现在的Three.js版本都支持ES模块导出，直接在测试和业务代码里用模块化方式引用，完全避开全局变量的问题：

// 测试文件示例
import { Vector3 } from 'three';
import { expect } from 'chai';

describe('Vector3 单元测试', () => {
  it('应该创建数值正确的向量', () => {
    const vec = new Vector3(1, 2, 3);
    expect(vec.x).to.equal(1);
    expect(vec.y).to.equal(2);
    expect(vec.z).to.equal(3);
  });
});

如果需要用到Three.js的其他API，也可以按需解构导入，或者整体导入：

import * as THREE from 'three';
// 后续可直接使用 THREE.Vector3、THREE.Mesh 等

2. 在测试环境中手动注入全局THREE #

如果你的代码必须依赖全局THREE变量（比如老项目没做模块化改造），可以在测试的入口文件或者Mocha的setup脚本里，把Three.js挂载到Node的global对象上：

// 比如在test/setup.js中添加
const THREE = require('three');
global.THREE = THREE;

然后在Mocha的配置里指定这个setup文件（比如在mocha.opts里加--require test/setup.js，或者在package.json的测试命令里追加该参数）。

3. 检查Webpack配置细节 #

确保你的Webpack配置正确处理了Three.js模块：

• 确认Three.js版本为较新版本（r120+都支持UMD/ES模块），旧版本在Node环境下的导出逻辑可能存在问题；
• Webpack的resolve配置无需额外特殊处理，但若有别名设置，别把three指向错误文件；
• 因为target是node，Webpack会默认保留Node模块的导出逻辑，不用额外配置externals排除three.js（除非你想让它通过Node的require加载）。

最后提醒：尽量采用第一种模块化导入的方式，不仅能解决测试问题，还能让代码的依赖关系更清晰，也方便后续通过Tree Shaking优化打包体积。

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