node.js 中的三个.js 文件中的 javascript `require` 而不是 html `script`

Question

我在 node.js 的三个.js 文件中使用 javascript require 而不是 html script。 一段html文件：

<script src="../build/three.js"></script>

<script src="js/controls/DragControls.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/controls/TransformControls.js"></script>

<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>

javascript 文件的等效部分：

var THREE = require('../build/three.js')

//module.exports = THREE

THREE.DragControls = require('./js/controls/DragControls.js')
THREE.OrbitControls = require('./js/controls/OrbitControls.js')
THREE.TransformControls = require('./js/controls/TransformControls.js')

var Stats = require('./js/libs/stats.min.js')
var dat = require('./js/libs/dat.gui.min.js')

所以browserify 命令在浏览器中显示空白页。我想可能是javascript js 文件中的代码不正确。我该怎么办？

Answer 1

browserify和three.js一起使用的问题是这样的：

• three.js 使用全局变量THREE 作为它的命名空间，当你require('three')（假设你做了npm install three）时，这个全局对象将被返回，所以var THREE = require('three'); 几乎可以满足你的期望.
• three.js 扩展大多不返回（通过module.exports，如果可用）他们定义的对象，所以在他们的情况下THREE.OrbitControls = require('...') 不会做你所期望的。相反，他们只是期望全局对象THREE 存在并为其分配一个新属性。您将在这些文件中看到THREE.OrbitControls = function() {...} 的模式。
• 这不起作用，因为如果有module.exports 供它使用，则three.js（主库）不会将自己分配给窗口对象（您可以轻松测试这一点，只需添加console.log(window.THREE) .

要解决此问题，您只需在加载扩展之前执行此一步，如下所示：

var THREE = require('three');

window.THREE = THREE;

require('./path/to/OrbitControls.js');
// ...

console.log(THREE.OrbitControls);