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 的代码，您可以创建一个这样的模块，您可以将其放在调用 requirejs.config 之前:

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在需要three的地方，加载three-glue，但是当three需要three-粘合加载三个."

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

基于您在问题中的配置:

Based on the config you have in your question:

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屋！