我正在尝试重写一个 THREE.js 项目，该项目将 HTML 中的 JS 文件直接包含到基于节点模块的项目中。然后使用webpack将其打包成bundle.js，这样在HTML中，就只包含bundle.js来执行。
原始项目
源项目结构如下所示：
index.html
js/EVAOptions.js
js/EVAPreviews.js
js/EVALoader.js
js/OrbitControls.js
js/thee.min.js
index.html。文件密钥源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>EVA Visualizaion Project</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/EVAPreviews.js"></script>
<script src="js/EVAOptions.js"></script>
<script src="js/EVALoader.js"></script>
<div id="workspace"></div>
<script>
// ...
evaLoader = new THREE.EVALoader(onLoad, url, options);
// ...
</script>
</body>
</html>
原项目中，index.html 包含了 Three.min.js 后，全局就有了一个 THREE 对象，因此任何 JS 文件都可以修改这三个对象。
正如 EVALoader.js 所做的那样，它通过附加一个函数来修改三个对象。
EVALoader.js关键源码：
THREE.EVALoader = function(onLoad, url, options){
// todo something
}
还有许多其他 JS 文件直接向这三个对象添加函数或变量。
目标项目
由于原始项目很复杂，我首先尝试最小化对原始项目的修改。我知道这可能不是真正的基于模块的重写，但项目可运行第一对我来说是一个很大的动力。
对于像 OrbitControls.js 这样的三个插件或实用程序来说很简单，可以使用
进行处理import * as THREE from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
但是对于像 EVALoader.js 这样的文件。我不知道该怎么办。
我的想法是声明一个三个对象并将其导出。可以用吗？
globals.js
import * as THREE from "three";
window.THREE = THREE;
export default THREE;
然后我就可以重写EVALoader.js了
import * as THREE from "globals"
THREE.EVALoader = function(onLoad, url, options){
// todo something
}
我是通过添加文件来实现的
globals.js
import * as MYTHREE from "three";
global.THREE = MYTHREE;
global.EVA= {};
console.log("start THREE", global.THREE);
console.log("start THREE", global.EVA);
export default MYTHREE;
然后导入它和其他js文件。