要求不按预期工作答案

【问题标题】：require not working as expected要求不按预期工作
【发布时间】：2017-02-11 17:31:33
【问题描述】：

var THREE = require('three');
require('three/examples/js/loaders/OBJLoader.js');

在我需要 node_modules 中的三个js后，我决定使用他们提供的 OBJLoader，但是我收到了一个意外错误。

THREE is not defined
    at eval (eval at <anonymous> (experiment.js:133), <anonymous>:5:1)

在 OBJLoader 内部：

THREE.OBJLoader = function ( manager )

它告诉我 OBJLoader 中的三个未定义，尽管我在上面需要它。尝试以这种方式要求文件时应该怎么做？

【问题讨论】：

您是如何构建代码的？ Browserify、Webpack 等？

标签： javascript three.js require

【解决方案1】：

由于three.js，尤其是它的示例中的代码依赖于定义的全局变量THREE，因此使用带有browserify之类的代码有点复杂。

我在 browserify-projects 中主要做的是创建一个文件 three-loader.js，如下所示：

const THREE = require('three');

// make three available for files from examples
window.THREE = THREE;

// load stuff from examples
require('three/examples/js/loaders/OBJLoader.js');

module.exports = THREE;

在项目中的任何地方都使用const THREE = require('./three-loader'); 而不是require('three');。

另一种选择是将示例文件夹中的文件复制到您的项目中，并在这些文件的顶部添加一行 const THREE = require('three');。

【讨论】：

【解决方案2】：

文件three/examples/js/loaders/OBJLoader.js 不是必需的 - 没有module.exports。 require 仍然可以像你正在做的那样文件，但是它只会尝试在该文件的上下文中执行代码 - 在该文件的上下文中没有定义变量 THREE。有问题的文件设计为在定义了窗口/全局变量 THREE 的浏览器中加载。

Three.js 是一个客户端库 - 要在浏览器中加载，您可以使用脚本标签：

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

这将在您的浏览器中建立一个变量THREE，这样您就可以通过以下方式加载示例 OBJLoader.js：

<script src="js/OBJLoader.js"></script>

【讨论】：

所以我仍然需要三个，但在 html 中加载 objloader？
为什么要使用require 来处理three.js？是客户端库吗？

【解决方案3】：

这是因为您正在尝试加载尚未安装的节点模块。有时，与模块相关的其他依赖项也没有安装，可能会导致它失败。如果我是你，我会去 npm 做 npm install three 然后用 var three = require('three'); 要求它。

npm 上的链接：https://www.npmjs.com/package/three

编辑：您列出的错误意味着根本没有找到该模块，这就是为什么我认为它更多地与您所包含的路径以及其他依赖项有关。 NPM install 通常会修复所有问题。然后要在您需要的对象上使用该方法，只需执行您的标准点符号

【讨论】：