requireJS sequential execution for non-AMD js files

问题

am trying to bundle my javascripts using requirejs and build on top of it. There are some existing js files that has been developed for UI manipulation and library use.

These js files, need to be included right after jquery includes and it also does things for social media widgets in the site. any who, I wrote the below code to try and bundle them to be executed when site is loaded, for some reason, I can see them loading in the firebug network. But the code within is failing because its executing more than once..

Below is my config and require statement, anyone can advise on why this behavior is happening?

'use strict';

require.config({
    paths: {
        jquery: '../vendors/jquery/jquery-1.10.2.min',
        underscore: '../vendors/underscore/underscore-min-1.5.1',
        backbone_query: '../vendors/backbone-query-parameters/backbone.queryparams',
        backbone: '../vendors/backbone/backbone-min-1.0.0',
        theme: '../vendors/theme/v1.9/scripts/'
    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'theme/base': {
            deps: ['jquery']
        },
        'theme/message': {
            deps: ['jquery', 'theme/base']
        },
        'theme/input_counter': {
            deps: ['jquery', 'theme/base', 'theme/message']
        },
        'theme/placeholder': {
            deps: ['jquery', 'theme/base', 'theme/message', 'theme/input_counter']
        },
        'theme/scrollbar': {
            deps: ['jquery', 'theme/base', 'theme/message', 'theme/input_counter', 'theme/placeholder']
        },
        'theme/fields': {
            deps: ['jquery', 'theme/base', 'theme/message', 'theme/input_counter', 'theme/placeholder', 'theme/scrollbar']
        },
        'theme/validate': {
            deps: ['jquery', 'theme/base', 'theme/message', 'theme/input_counter', 'theme/placeholder', 'theme/scrollbar', 'theme/fields']
        },
        'theme/main': {
            deps: ['jquery', 'theme/base', 'theme/message', 'theme/input_counter', 'theme/placeholder', 'theme/scrollbar', 'theme/fields', 'theme/validate']
        }
    }
});


require(['jquery', 'theme/base', 'theme/message', 'theme/input_counter',
    'theme/placeholder', 'theme/scrollbar', 'theme/fields', 'theme/validate', 'theme/main']);

回答1:

Two things I noticed here:

Your require() function is empty, require() callback function should initialize something like Backbone View.
In shim you are trying to manage all your dependencies, declare dependencies of Backbone and _ only.

Your requirejs bootstrap file(your config file) should be like this considering main.js as your js file which initializes your main backbone view :

requirejs.config({
    paths: {
        jquery: '../vendors/jquery/jquery-1.10.2.min',
        underscore: '../vendors/underscore/underscore-min-1.5.1',
        backbone_query: '../vendors/backbone-query-parameters/backbone.queryparams',
        backbone: '../vendors/backbone/backbone-min-1.0.0'
    },
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            deps: ['jquery'],
            exports: '_'
        }
    }
});

require(['theme/main']
function(main){
  main.initalize();
});

And then in respective js file inside define() function tell requirejs to load your other files accordingly.

来源：https://stackoverflow.com/questions/17914786/requirejs-sequential-execution-for-non-amd-js-files

标签

requirejs