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/three/three.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及更早版本

如果此文件是任何指南,则三个不会调用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'
        }
    }
});