L.Vardan L.Vardan - 1 month ago 11
Javascript Question

How to make r.js work with bundles

Hi everyone I have an application which works with backbone js and requier.js. I am trying to reduce HTTP Request that's why I am trying to use requier.js bundles functionality with r.js(optimization). But every time i see not 1 file I see 3-or 4 files. Please help me figure out what is going in my application. My build js look like this.

{
baseUrl : "../js",
mainConfigFile: "../js/main.js",
dir: "../js_build",
optimize: "none",
optimizeCss: "standard",
fileExclusionRegExp: /^node_modules$/,
modules: [
{
name: 'main'
},
{
name: 'views/companyPage/companyPage',
exclude: ['main']
}
],

bundles: {
'views/companyPage/companyPage': ['companyPage', ..., 'text!templates/companyPage/companyPage.html']
},
paths: {
.....
}

},


When I run gulp task, it shows that everything is done, but in browser network section I see that I have multiple files loaded not one bundle. I don't know how to fix this. I think that I am doing everything right. I need advice. Thanks in advance.

chrome network picture

In my index.html

I include only 1 script tag (require.js)

<script type="text/javascript" data-main="/js_build/main.js" src="/js/lib/require.js"></script>


where '/js_build/main.js' optimized virson of my main.js file.

My main.js requier.js config file

requirejs.config({
//By default load any module IDs from js/lib
deps: ["views/companyPage/CompanyDivision", 'views/homepage/homePage', 'views/industryPage/industryView'],
baseUrl: '/js/lib',

paths: {
jquery: 'jquery-2.1.4',
d3: 'd3',
models: '../models',
views: '../views',
collections: '../collections',
templates: '../templates',
root: '../',
bootstrap_typeahead: "bootstrap3-typeahead.min",
bootstrap: 'bootstrap/js/bootstrap.min',
bootstrap_treeview: 'bootstrap-treeview',
select2: 'select2.min',
numConvertor: 'NumberConvertor',
sigma: 'sigma/sigma',
script: 'lib/script',
noverlap: 'sigma/plugins/sigma.layout.noverlap',
animate: 'sigma/plugins/sigma.plugins.animate.min',
parallel: 'sigma/plugins/sigma.renderers.parallelEdges.min',
edgeLabels: 'sigma/plugins/sigma.renderers.edgeLabels.min',
relativeSize: 'sigma/plugins/sigma.plugins.relativeSize.min',
neighborhood: 'sigma/plugins/sigma.plugins.neighborhoods.min',
force: 'sigma/plugins/sigma.layout.forceAtlas2.min',
sinon: '../test/lib/sinon-1.17.3',
jasmine: '../test/lib/jasmine-2.4.0/jasmine',
//"ga": "//www.google-analytics.com/analytics",
"stripe": 'Strip/stripe'
},

shim: {
"ga": {
exports: "__ga__"
},
"underscore": {
exports: "_",
},
"marionette": {
exports: "Marionette",
},
"backbone": {
deps: ['underscore', 'jquery'],
exports: 'Backbone',
},
"bootstrap": {
deps: ['jquery']
},
"sigma": {
exports: 'sigma',
},
"noverlap": {
deps: ['sigma'],
exports: 'noverlap',
},
"animate": {
deps: ['sigma'],
exports: 'animate',
},
"parallel": {
deps: ['sigma'],
exports: 'parallel',
},
"edgeLabels":{
deps: ['sigma'],
exports: 'edgeLabels',
},
"relativeSize": {
deps: ['sigma'],
exports: 'relativeSize',
},
"neighborhood": {
deps: ['sigma'],
exports: 'neighborhood',
},
"force": {
deps: ['sigma'],
exports: 'force',
},

}

});

require(['jquery',
'models/user',
'root/router',
'views/navbar',
'views/loginandRegisterModal/loginRegisterResetModal',
'views/blocks/footer',
'views/jobCollectionView',
'views/blocks/miraInfo',
'root/ajaxsetup',
'bootstrap'
], function(
$,
user,
MainRouter,
Navbar,
LRRModal,
Footer,
JobCollectionView,
MiraInfo
){

Backbone.View.prototype.close = function () {
if (this.beforeClose) {
this.beforeClose();
}

this.undelegateEvents();
this.unbind();
this.remove();
};

user.CurrentUser.fetch({
success: function () {

}
});

var router = new MainRouter();


Backbone.history.start({
pushState: true,
});

var miraInfo = new MiraInfo();
$('.modal-backdrop').remove();
var navview = new Navbar();
navview.setElement('#nav');
navview.render();


var loginModal = new LRRModal();
loginModal.setElement("#loginModal");
loginModal.render();

var footer = new Footer();
footer.setElement("footer");
footer.render();


});

Answer

How @Louis say you need to put bundles in your main.js file. Now I will describe my situation and how I solve it(it works for me). I have the sam problems and I find out how to fix it(it works for me).

First step (main.js)

Need to change main.js baseUrl to your js_build wich mean that after optimization your main.js file will use files from it.

Your main.js file must look like this.

requierjs.config({
    baseUrl: '/js_build',

    paths: {
        jquery: 'lib/jquery-2.1.4',
        d3: 'lib/d3',
        models: 'models',
        views: 'views',
        collections: 'collections', 
        templates: 'templates',
        root: '',
        bootstrap_typeahead: "lib/bootstrap3-typeahead.min",
        bootstrap: 'lib/bootstrap/js/bootstrap.min',
        bootstrap_treeview: 'lib/bootstrap-treeview',
        select2: 'lib/select2.min',
        numConvertor: 'lib/NumberConvertor',
        sigma: 'lib/sigma/sigma',
        script: 'lib/script',
        noverlap: 'lib/sigma/plugins/sigma.layout.noverlap',
        animate: 'lib/sigma/plugins/sigma.plugins.animate.min',
        parallel: 'lib/sigma/plugins/sigma.renderers.parallelEdges.min',
        edgeLabels: 'lib/sigma/plugins/sigma.renderers.edgeLabels.min',
        relativeSize: 'lib/sigma/plugins/sigma.plugins.relativeSize.min',
        neighborhood: 'lib/sigma/plugins/sigma.plugins.neighborhoods.min',
        force: 'lib/sigma/plugins/sigma.layout.forceAtlas2.min',
        sinon: 'test/lib/sinon-1.17.3',
        jasmine: 'test/lib/jasmine-2.4.0/jasmine',
        "ga": "//www.google-analytics.com/analytics",
        "stripe": 'lib/Strip/stripe'
    },

    bundles: {
         'any-name': [
              //put your files here like ('views/someDir/somefile')
         ]
    },
});

Name which you write in bundle must be the same in your build.js file modules.

Step 2 (build.js)

Need change build.js file you don't need mainConfig here you just need main module in modules. After changes your build.js will look like this.

{
    "baseUrl" : "../js",
    "dir": "../js_build",
    "optimize": "none",
    removeCombined: true,
    modules: [
        {
            name: 'main',
            include: ['main']
        },
        {
            name: 'any-name', //any-name must be the same bundle name
            create: true,
            include: ['same files that which you give to bundle'],
            exclude: ['main']
        },

    ],
}

step 3 (index.html)

need give requier.js us data-main file located in your js_build/main.js. After editing it will look like this.

   <script type="text/javascript" data-main="/js_build/main.js" src="/js/lib/require.js"></script>

P.S I solve my problems like this try it may help you.

Comments