javascript - Trouble combining Require.js and Backbone.jsUnderscore.js - Stack Overflow

admin管理员组

文章数量:1345075

I've read previous threads where other members have had identical error messages as me, but their accepted solution doesn't seem to help.

Basically I get this in Chrome console when I try to load index.html:

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

A couple of seconds later this shows up:

Uncaught Error: Load timeout for modules: underscore,backbone

Chrome network tools doesn't show any anomalies everything up until day_view.js is loaded fine (200 OK).

File structure

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() {
        ...
    }
...

I've read previous threads where other members have had identical error messages as me, but their accepted solution doesn't seem to help.

Basically I get this in Chrome console when I try to load index.html:

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

A couple of seconds later this shows up:

Uncaught Error: Load timeout for modules: underscore,backbone

Chrome network tools doesn't show any anomalies everything up until day_view.js is loaded fine (200 OK).

File structure

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() {
        ...
    }
...

• javascript
• html
• backbone.js
• requirejs
• underscore.js

Share Improve this question Follow edited May 28, 2013 at 7:16 MdaG asked May 27, 2013 at 13:21 MdaGMdaG 2,73022 gold badges3636 silver badges4848 bronze badges 9

• This question might help you: stackoverflow./questions/10866740/… – jantimon Commented May 27, 2013 at 13:50
• @jantimon I've read that one, but I can't see anything that helps with my current predicament. Is there anything in particular you think I should read? I've read this (requirejs/docs/errors.html#notloaded) too, but I can't find the cause there either. – MdaG Commented May 27, 2013 at 14:01
• try shim = { ... deps: ["underscore", "jquery"] ... } – jantimon Commented May 27, 2013 at 14:05
• @jantimon Doesn't work either. Same error message as in the question above. – MdaG Commented May 27, 2013 at 14:16
• 1 and also do what @jantimon said! – jakee Commented May 27, 2013 at 14:37

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 8

This finally worked.

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

and

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

You can use the shim above, or you can also use jrburke's** AMD patible fork of Backbone/Underscore:

https://github./amdjs/backbone

https://github./amdjs/underscore

This allows you to simply do:

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

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

Frankly, I found the fork easier/cleaner/more robust than using a shim.

** FYI jrburke is the creator of requirejs.

PS Good news, Underscore 1.6.0 now supports requirejs define !!!

versions below this require shims, or requiring underscore.js then blindly hoping that the "_" global variable hasn;t been smashed (which to be fair is a fair bet)

simply load it in by

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

No shimming required :)

本文标签： javascriptTrouble combining Requirejs and BackbonejsUnderscorejsStack Overflow