无法组合Require.js和Backbone.js / Underscore.js

时间:2013-05-27 13:21:14

标签: javascript html5 backbone.js requirejs underscore.js

我已经读过以前的帖子,其他成员的错误消息和我一样,但他们接受的解决方案似乎没有帮助。

当我尝试加载index.html时,基本上我在Chrome控制台中得到了这个:

Uncaught Error: Module name "underscore" has not been loaded yet for context: _. Use require([])

几秒钟后,这会出现:

Uncaught Error: Load timeout for modules: underscore,backbone

Chrome网络工具在day_view.js正常加载(200 OK)之前不会显示任何异常。

文件结构

enter image description here

的index.html

...
<script>
        var require = {
            deps: ["jquery/jquery-min", "underscore/underscore-min", "backbone/backbone-min"]
        };
</script>
<script data-main="scripts/main" src="scripts/require.js"></script>
...

main.js

require.config({
    baseUrl: 'scripts',

    paths:{
        jquery:'jquery/jquery-min',
        underscore:'underscore/underscore-min',
        backbone:'backbone/backbone-min'
    },

    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore/underscore-min", "jquery/jquery-min"],
            exports: "Backbone"
        }
    },

    waitSeconds: 200
});

require(['day_view'], function (day_view) {
    function start() {
        day_view.render();
    }

    return {
        start:start
    };
});

day_view.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
    function render() {
        ...
    }
...

3 个答案:

答案 0 :(得分:8)

这终于奏效了。

require.config({
    paths:{
        jquery:'jquery/jquery-min',
        underscore:'underscore/underscore-min',
        backbone:'backbone/backbone-min'
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        waitSeconds: 15
    }
});

require(['day_view'], function (day_view) {
    function start() {
        day_view.show();
    }
    console.log(day_view); // Empty object here?
    return {
        start:start
    };
});

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) { ...

答案 1 :(得分:3)

您可以使用上面的垫片,或者您也可以使用jrburke的**兼容Backbone / Underscore的分叉:

https://github.com/amdjs/backbone

https://github.com/amdjs/underscore

这允许您简单地执行:

require.config({
    paths:{
        jquery:'jquery/jquery-min',
        underscore:'underscore/underscore-min',
        backbone:'backbone/backbone-min'
    }
});

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) { ...

坦率地说,我发现叉子比使用垫片更容易/更清洁/更健壮。

** FYI jrburke是requirejs的创建者。

答案 2 :(得分:2)

PS好消息,Underscore 1.6.0现在支持requirejs define !!!

以下版本需要垫片,或者需要使用underscore.js然后盲目地希望“_”全局变量没有被破坏(这是公平的赌注)

只需通过

加载即可
  requirejs.config({
    paths: {
        "underscore": "PATH/underscore-1.6.0.min",
    }
  });

不需要垫片:)