require.js and r.js dependencies

3
votes

My app has been working fine but today I decided to give r.js a swirl.

Right now my tree(part of it) looks like

  • index.html
  • assets
    • js
      • require.js
      • r.js
      • main.js
      • components
        • underscore.js
        • jquery.js
        • backbone.js
        • jqueryuijs
      • models
        • election.js
      • collections
        • elections.js
      • views
        • app.js
        • election.js

in my index.html file I have <script data-main="assets/js/main" src="assets/js/require.js"></script>

and this is main.js

require.config({
    paths: {
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
        underscore: 'components/underscore/underscore-min',
        backbone: 'components/backbone/backbone-min',
        jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min'
    },

    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },

        'jqueryui': ['jquery']
    }

});

require(['views/app'], function(App) {

    var router = Backbone.Router.extend({
        routes: {
            '': 'root',
            'year(/:year)': 'year'
        },

        root: function() {
            new App();
        },

        year: function(year) {
            new App({
                year: year
            });
        }
    });

    r = new router();
    Backbone.history.start({
        // pushState: true
    });
});

and in my modules I refer to my files like assets/js/views/election.js or assets/js/models/election.js

but when I run r.js with this build.js

({
    // baseUrl: "assets/",
    paths: {
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
        underscore: 'components/underscore/underscore-min',
        backbone: "components/backbone/backbone-min",
        jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min'
    },
    name: "main",
    out: "main-built.js"
})

I get Error: ENOENT, no such file or directory '/Users/alex/Dropbox/www/animated-elections/assets/js/assets/js/collections/elections.js'. I get what it means by I don't understand why it is adding another assets/js to my paths.

3
javascriptoptimizationbackbone.jsrequirejs

3 Answers

0
votes

I believe require.js is supposed to go in the same folder as the main file, ie. next to the assets folder instead of inside it.

0
votes

r.js is inside your app directory, instead of being a sibling to it, as specified in the example setup.

I haven't tested this but r.js is probably assuming that any module calls should be relative to where it's located.

0
votes

Add in the build.js file this codes.

baseUrl: ".",
paths: {
    jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
    underscore: 'components/underscore/underscore-min',
    backbone: "components/backbone/backbone-min",
    jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min',
    'views/app': 'empty:',
    'views/election': 'empty:',
    //and so with others
},
name: "main",
out: "main-built.js"

Regards.-