javascript - Require.js 未加载 Three.js

Question

所以我有一些生成的 JavaScript(来自 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();
...

这最终会在浏览器中出现错误(在上面的最后一行):

Uncaught TypeError: Cannot read property 'Scene' of undefined

有趣的是 jQuery 没有任何问题；就好像 Three.js 根本没有被加载。

需要配置:

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

jQuery 位于 'js/src' 文件夹中，而 Three.js 位于 'js/third/third.js' 中(由于使用了 Express，因此 js 文件夹对浏览器是隐藏的，并且看起来并不存在)如果我将 Three.js 移至 src 文件夹，则会产生任何影响)。 Sizzle 处于独立状态，因为它位于 src 内的子文件夹中导致错误。

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

Answer 1

从 r72 开始

从 r72 开始，三个确实调用 define 。所以你不应该设置 shim 。如果您没有有依赖 THREE 的代码在全局范围内可用，您就完成了。

但是，如果有代码依赖 THREE在全局范围内可用，这是一个问题，因为作为一个表现良好的 AMD 模块，THREE不再仅仅泄漏到全局空间。对于需要 THREE 的代码在全局空间中，您可以创建一个这样的模块，您可以将其放在调用 requirejs.config 之前:

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

您的 RequireJS 配置应包含此映射:

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

这告诉 RequireJS“只要需要 three ，就加载 three-glue ，但是当 three 中需要 three-glue 时，加载 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 兼容版本一起使用会导致泄漏，这是安全的。它只会导致不必要的代码。 )

适用于 r71 及更早版本

如果this file有什么指导，三不打电话define 。所以你需要一个shim如果您希望它在需要它作为模块时具有值，则可以使用它。像这样的事情:

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'
        }
    }
});