将HTML直引的THREE.js项目改造为Node模块项目的疑问

你的方案完全可行，能最大限度减少原项目代码改动，核心是模拟原全局THREE对象的运行环境，同时适配Node模块化规范，具体实现步骤如下：

• 创建globals.js文件
  先通过npm安装three包后，在这个文件里完成全局挂载与导出：

  import * as THREE from 'three';
  
  // 挂载到window全局，还原原HTML引入的环境
  window.THREE = THREE;
  
  // 导出供自定义模块显式引入
  export default THREE;
  

• 改造自定义加载器（如EVALoader.js）
  原自定义文件直接操作全局THREE的逻辑不用改，只需在顶部引入globals.js导出的对象：

  import THREE from './globals.js';
  
  // 原代码逻辑完全保留，直接向THREE添加方法
  THREE.EVALoader = class EVALoader {
    // 原加载器的实现代码...
  };
  

  若原自定义文件依赖全局THREE的其他逻辑，无需修改——因为globals.js已经提前将THREE挂载到window，即使不显式引入，只要globals.js在自定义文件前加载，代码也能正常运行，但显式引入更符合模块化规范。

• 配置Webpack入口文件
  以main.js作为入口，按顺序加载依赖：

  // 先初始化全局THREE环境
  import './globals.js';
  
  // 加载自定义加载器，扩展THREE对象
  import './EVALoader.js';
  
  // 引入原项目业务代码，逻辑无需任何改动
  import './your-original-business-code.js';
  

• Webpack配置注意点

  • 确保已执行npm install three安装依赖包
  • 无需额外配置全局变量暴露插件（如ProvidePlugin），因为我们已通过globals.js手动完成全局挂载

这种方式下，原项目的业务代码几乎零改动，自定义加载器仅需添加一行引入语句，完美契合你“尽量减少改动”的需求。

内容的提问来源于stack exchange，提问作者John.Man