2

I'm working on a single page app that requires several third-party libs. To reduce build time I'm trying to create two separate bundles: one for the libs code and one for the app code. My build process uses grunt-browserify to generate the bundles. Here's my browserify task (I'm using grunt-load-tasks to modularize my Grunt tasks):

var libs = [
    'backbone',
    'backbone-relational',
    'backbone.babysitter',
    'backbone.wreqr',
    'bootstrap',
    'bootstrap-growl',
    'handlebars',
    'jquery',
    'marionette',
    'underscore'
];

module.exports = {
    options: {
        external: libs
    },
    libs: {
        src: [],
        dest: './build/js/libs.js',
        options: {
            external: null,
            require: libs
        }
    },
    app: {
        src: ['./frontend/js/app.coffee'],
        dest: './build/js/app.js',
        options: {
            browserifyOptions: {
                debug: true,
                extensions: ['.coffee'],
            },
            watch: true
        }
    }
}

This successfully creates the two separate bundles and my app is functional after including the bundles on the page. However I'm noticing that Backbone and Handlebars are being included in both the libs.js bundle and the app.js bundle when I would have expected them to be included only in the libs.js bundle. Any idea what I'm doing wrong?

david_i_smith
  • 228
  • 3
  • 12
  • Update: Adding a "bundleExternal: false" option to the app bundle's browserifyOptions prevents Backbone and Handlebars being added to the app bundle. However I'm now getting a "Cannot find module 'Backbone'" error from the libs bundle, even though I can see that Backbone is included in it. – david_i_smith Mar 21 '15 at 20:56
  • 1
    Did you ever resolve this? I've ended up at the exact same place. – Core Jun 06 '16 at 17:46

0 Answers0