How do I use require to optimize 'backbone.bootstrap-modal' into a large app

118 Views Asked by At

I am trying to optimize an application but every time I do it seem the module backbone.bootstrap-modal throws the error Can't find variable: Backbone. r.js has successfully optimized everything into one file (as you will see I turned off uglify so that I could see where the problem is) and I believe that Backbone is correctly added. Certainly other modules are finding jQuery without trouble. The app is served but as it starts it throws the error.

The grunt file I'm using contains the following requirejs task:

requirejs: {
    buildApp: {
        options: {
            appDir:     '<%= buildPath %>/<%= appPath %>',
            baseUrl:    'js',
            dir:        '<%= distPath %>/<%= appPath %>/',
            mainConfigFile: 'public/js/myApp.js',
            paths:      {require: 'bower_components/requirejs/require'},                    
            modules:    [{
                        name:           'myApp',
                        include:        ['require'],
                        }],
            optimize:   'none',//'uglify2',
            optimizeCss:    'standard',
            preserveLicenseComments: false,
            inlineText:     true,
            removeCombined: true                
            }
        }
    },

The myApp.js file has the following config for require:

require.config({

    paths: {
        lodash:     'bower_components/lodash/dist/lodash',
        jquery:     'bower_components/jquery/dist/jquery',
        bootstrap:  'bower_components/bootstrap/dist/js/bootstrap',
        moment:     'bower_components/moment/moment',
        backbone:   'bower_components/backbone/backbone',
        react:      'bower_components/react/react-with-addons',
        reactDom:   'bower_components/react/react-dom',
        reactBootstrap: 'bower_components/react-bootstrap/react-bootstrap',
        babel:       'bower_components/requirejs-react-jsx/babel-5.8.34.min',
        jsx:         'bower_components/requirejs-react-jsx/jsx',
        text:        'bower_components/requirejs-text/text',
        modal:       'bower_components/backbone.bootstrap-modal/src/backbone.bootstrap-modal',
        validator:   'bower_components/bootstrap-validator/dist/validator',
        Waypoint:    'bower_components/waypoints/lib/jquery.waypoints',
        ie10workaround: 'bower_components/ie10-viewport-bug-workaround/dist/ie10-viewport-bug-workaround',
        fontawesome: 'bower_components/font-awesome/fonts',

        models:      'models',
        views:       'views',

        myView:      'myView'
        },

map: {'*': {'underscore': 'lodash'}},

shim: {
    backbone: {
              deps:     ['underscore', 'jquery'],
              exports:  'Backbone'
              },
    react:    {exports: 'React'},
    reactBootstrap: {deps: ['react']},
    bootstrap: {
               deps:    ['jquery'],
               exports: 'bootstrap'
               },
    validator: {deps:   ['bootstrap']},
    Waypoint:  {deps:   ['jquery']},
    modal:     {
               deps:    ['backbone', 'bootstrap'],
               exports: 'Backbone.BootstrapModal'
               },
    jsx:       {deps:   ['babel', 'text']},
    fonts:     {deps:   ['fontawesome']},
    ie10workaround: {
                    deps:    ['bootstrap'],
                    exports: 'ie10workaround'
                    },
    myInit:   {
              deps: ['backbone', 'react', 'reactDom', 'jsx',
                    'bootstrap', 'modal', 'validator',
                    'Waypoint', 'ie10workaround']
              }
    },

config: {
    babel:  {
            sourceMaps:     "inline",
            fileExtension:  ".jsx"
            }
    }

});

require(['./myInit'], function(myInit) {
    myInit.initialize();
    });

In this as I understood it the line:

modal: {
       deps:    ['backbone', 'bootstrap'],
       exports: 'Backbone.BootstrapModal'
       },

ensures that the dependencies are loaded for this module but it's this module reporting (at runtime) it cannot find Backbone, I just don't know why?

Addendum

This is the bower.json I'm using:

{
  "name": "my-web-client",
  "authors": [
    "(me <[email protected]>)"
  ],
  "description": "Web client",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^3.1.1",
    "lodash": "^4.17.4",
    "backbone": "^1.3.3",
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.5.0",
    "react": "^15.4.2",
    "babel": "^5.8.38",
    "requirejs": "^2.3.3",
    "requirejs-react-jsx": "^1.0.2",
    "fuelux": "^3.15.11",
    "waypoints": "^4.0.1",
    "react-bootstrap": "^0.30.8",
    "backbone.bootstrap-modal": "^0.9.0",
    "bootstrap-datepicker": "^1.6.4",
    "bootstrap3-typeahead": "^4.0.2",
    "ie10-viewport-bug-workaround": "^1.0.3",
    "text": "^2.0.15",
    "bootstrap-validator": "^0.11.9"
  },
  "resolutions": {
    "backbone": "^1.3.3",
    "bootstrap": "^3.3.6"
  }
}
0

There are 0 best solutions below