Require.js没有加载Three.js [英] Require.js not loading Three.js

问题描述

所以我有一些生成的JavaScript（来自TypeScript）：

So I have some generated JavaScript (from TypeScript):

define(["require", "exports", "three", "jquery", "./test"], function (require, exports, THREE, jQuery, Test) {
var Main = (function () {
    function Main() {
        this.container = jQuery('#test');
        this.scene = new THREE.Scene();
...

这最终导致浏览器出错（在上一行）：

This ends up with an error in the browser (on the last line of above):

Uncaught TypeError: Cannot read property 'Scene' of undefined

有趣的是，jQuery有没有问题;好像Three.js没有被加载。

Interestingly jQuery has no problems; it's as if Three.js is simply not being loaded.

需要配置：

requirejs.config({
    baseUrl: "src",
    paths: {
        "main": "../main",
        "test": "../test",
        "three": "../three/three",
        "sizzle": "/src/sizzle/dist/sizzle"
    }
});

jQuery位于'js / src'文件夹中，而Three.js位于'js / three / three.js'（正在使用Express，因此浏览器隐藏了js文件夹，它如果我将three.js移动到src文件夹似乎没有任何区别）。 Sizzle坐在它自己的位置，因为它导致错误来自src内的子文件夹。

jQuery is in the 'js/src' folder, whereas Three.js is at 'js/three/three.js' (Express is being used so the js folder is hidden to the browser, and it doesn't seem to make any difference if I move three.js to the src folder). Sizzle is sitting on it's own because it was causing errors from being in a subfolder inside src.

我错过了任何明显的事情吗？我没有线索

Am I missing anything obvious about this? I have no leads

推荐答案

从r72开始

从r72开始，三个确实调用 define 。所以你不应该设置 shim 。如果您不的代码依赖于 THREE 在全球空间中可用，那么您就完成了。

From r72 onwards

From r72 onwards, three does call define. So you should not set a shim. If you do not have code that relies on THREE being available in the global space, you're done.

但是，如果有代码依赖于 THREE 在全球空间中可用，则这是一个问题，因为，一个表现良好的AMD模块， THREE 不再只是泄漏到全球空间。对于全局空间中需要 THREE 的代码，您只需创建一个这样的模块，您可以在调用 requirejs.config <之前放置该模块。 / code>：

However, if there is code that relies on THREE being available in the global space, that's a problem because, as a well-behaved AMD module, THREE no longer just leaks to the global space. For code that needs THREE in the global space, you can just create a module like this which you can put just before your call to requirejs.config:

define("three-glue", ["three"], function (three) {
    window.THREE = three;
    return three;
});

您的RequireJS配置应包含此地图：

Your RequireJS configuration should contain this map:

map: {
  '*': {
    three: 'three-glue'
  },
  'three-glue': {
    three: 'three'
  }
}

这告诉RequireJS需要三，加载三胶代替，但当三需要三合一加载三。

This tells RequireJS "wherever three is required, load three-glue instead, but when three is required in three-glue load three."

所有在一起：

define("three-glue", ["three"], function (three) {
    window.THREE = three;
    return three;
});

requirejs.config({
    baseUrl: "src",
    paths: {
        "main": "../main",
        "test": "../test",
        "three": "../three/three",
        "sizzle": "/src/sizzle/dist/sizzle"
    },
    map: {
        '*': {
            three: 'three-glue'
        },
        'three-glue': {
            three: 'three'
        }
    }
});

（技术说明：r72实际上仍然执行了泄漏到全球空间，以及之后的一些版本。编辑此答案时最新发布的版本（r83）不自行泄漏到全球空间。我没有检查r72和r83之间的每个版本来检查更改的时间使用上面的代码与旧的AMD兼容版本进行泄漏是安全的。它只会导致不必要的代码。）

(Technical note: r72 actually still performed the leak to the global space, and some versions after it do. The latest released version at the time of editing this answer (r83) does not leak to the global space by itself. I've not examined every version between r72 and r83 to check when the change was made. Using the code above with an old AMD-compliant version that does the leak is safe. It just results in unnecessary code.)

如果此文件是任何指南，三个不会调用 define 。因此，如果您希望它在需要它作为模块时具有值，则需要 shim 。这样的事情：

If this file is any guide, three does not call define. So you need a shim for it if you want it to have a value when you require it as a module. Something like this:

shim: {
    three: {
        exports: 'THREE'
    }
}

根据你问题中的配置：

requirejs.config({
    baseUrl: "src",
    paths: {
        "main": "../main",
        "test": "../test",
        "three": "../three/three",
        "sizzle": "/src/sizzle/dist/sizzle"
    },
    shim: {
        three: {
            exports: 'THREE'
        }
    }
});

这篇关于Require.js没有加载Three.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！