2

I'm using Optimizer for the first time and I am running in some issues or questions.

I'm trying to optimize a main file and it puts, like I've expected, the jQuery, Backbone and Require modules ( and uses then across the whole navigation). But let's say I have a jQuery Plugin that I use on several views. I've tried to add it in the main file using the "include" option on the build.js file. It adds it ( e.g jQuery Slides ) but as I have a view with define("jquery-slides") ( again, an example ) the browser loads the file of the plugin again. Even if it is on the main built file.

Is this suppose to happen? Can I fix this?

Thanks.

Here is some code. Hope it helps =)

build.js

{
baseUrl: "javascripts/",
appDir: "..",
dir: "dist",
name: "main-site",

include: ['libs/requirejs/require', jquery-slides'],
insertRequire: ['main-site'],

paths: {
    "main-site": 'main-site',
    'jquery': 'libs/jquery/jquery',
    'jquery-slides': 'libs/jquery/plugins/slides.min.jquery'

}
}

main-site.js

require.config({
baseUrl: "/javascripts/",
paths: {
    'jquery': 'libs/jquery/jquery',
    'underscore': 'libs/underscore/underscore',
    'bootstrap': 'libs/bootstrap/bootstrap.min',
    'datepicker': 'libs/bootstrap/plugins/bootstrap-datepicker',
    'backbone': 'libs/backbone/backbone.max',
    'backbone-paginator': 'libs/backbone/plugins/backbone.paginator',
    'backbone-validation': 'libs/backbone/plugins/backbone.validation',
    'text': 'libs/requirejs/text',
    'templates': '/templates/site',
    'views': 'views/site',
    'jquery-cookie': 'libs/jquery/plugins/jquery.cookie',
    'jquery-raty': 'libs/jquery/plugins/jquery.raty.min',
    'jquery-slides': 'libs/jquery/plugins/slides.min.jquery'
},
shim: {
    'backbone-paginator': ['backbone'],
    'bootstrap': ['jquery'],
    'datepicker': ['bootstrap'],
    'jquery-cookies': ['jquery'],
    'jquery-raty': ['jquery'],
    'jquery-slides': ['jquery'],
    'backbone-validation': ['backbone']
}
});

require([
'app-site'
], function(App) {
$(function(){
    App.initialize();
});
});
1
  • You should load your full configuration in build.js, redeclaring it is long, unecessary and error prone. Next, if jquery-slide is required by a module, you shouldn't need to list it in include. Only include the module bootstrapping your application. From there dependencies will resolve themselves. Sep 9, 2013 at 21:36

1 Answer 1

2

Instead of using include I recommend you to declare the modules you want to build. In this way requirejs will package the module and all its dependencies in the optimized bundle.

{
    baseUrl: "javascripts/",
    appDir: "..",
    dir: "dist",
    paths: {
        "main-site": 'main-site',
        'jquery': 'libs/jquery/jquery',
        'jquery-slides': 'libs/jquery/plugins/slides.min.jquery'
    },
    modules : [
        {
            name : 'main-site',
        }
    ]
}

Further considerations:

  1. If you have jquery-slides included as a dependency in any of your modules define(['jquery-slides'], function() {... } you don't need to use the include directive since all the dependencies of that module will be included in the optimized file

    See the documentation of the modules property in this link

    https://github.com/jrburke/r.js/blob/master/build/example.build.js#L330

  2. Use the property mainConfigFile to avoid duplications https://github.com/jrburke/r.js/blob/master/build/example.build.js#L35

Good luck and I hope this helps you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.