使用Vite时如何覆盖依赖中的three.js导入？

1. 确保自定义fork的three.js正确安装 #

如果你的fork托管在GitHub，直接通过npm安装：

npm install git+https://github.com/你的用户名/three.js.git

如果是本地fork的代码，用本地路径安装：

npm install ../path-to-your-forked-three

安装完成后，检查项目根目录的package.json，确认three依赖指向你的fork版本。

2. 配置package.json的overrides（优先推荐） #

在项目根目录的package.json中添加overrides字段，强制所有依赖（包括嵌套依赖）使用你的fork版本：

{
  "overrides": {
    "three": "git+https://github.com/你的用户名/three.js.git"
    // 本地路径的话写："../path-to-your-forked-three"
  }
}

执行npm install让配置生效，然后删除node_modules/.vite缓存目录（Vite的预构建缓存），重启开发服务。

3. 正确配置Vite的resolve.alias（如果overrides无效时使用） #

如果overrides不生效，在vite.config.js/ts中配置别名，强制所有对three的引用指向你的fork版本：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      // 如果是npm安装的fork版本，直接写包名
      'three': require.resolve('three'),
      // 如果是本地路径，替换为你的fork的绝对路径
      // 'three': path.resolve(__dirname, '../path-to-your-forked-three'),
    },
    // 确保解析扩展名覆盖three.js的模块文件
    extensions: ['.mjs', '.js', '.ts', '.json']
  },
  // 强制Vite预构建你的fork版本，避免缓存问题
  optimizeDeps: {
    include: ['three'],
    // 测试时可开启强制清除缓存，验证后可关闭
    // force: true
  }
})

配置完成后，删除node_modules/.vite缓存，重启Vite服务。

4. 排查常见问题 #

• 检查你的fork的package.json，确保main、module字段指向正确的入口文件，避免Vite无法找到模块。
• 如果报错Could not resolve "three"，确认你的fork版本是否正确安装，node_modules/three目录是否存在且文件完整。
• 尝试删除node_modules和package-lock.json，重新执行npm install，清除所有缓存。

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