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"
}
}