For my website project I am using a multi-page require js set-up (see: https://github.com/requirejs/example-multipage-shim).
After optimization I aim to have two files: main.js and page1.js. Main.js includes app.js that loads bootstrap/collapse (see r.js build-file below). However when I call the bootstrap-collapse function page1.js, it doesn't work after optimization. When I do the same call in app.js, it does work after optimization. In case of the collapse call in page1.js I get the error: 'Undefined is not a function', on the bootstrap collapse function. Without optimization everything works fine.
What am I doing incorrectly?
This is my requirejs config:
requirejs.config({
paths: {
'jQuery' : ["http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery","vendor/jquery/jquery-1.9.1"],
'bootstrap': 'vendor/bootstrap'
},
shim: {
'jQuery': {exports: "$"},
'bootstrap/slider': { deps: ['jQuery'], exports: '$.fn.slider' },
'bootstrap/affix': { deps: ['jQuery'], exports: '$.fn.affix' },
'bootstrap/alert': { deps: ['jQuery'], exports: '$.fn.alert' },
'bootstrap/button': { deps: ['jQuery'], exports: '$.fn.button' },
'bootstrap/carousel': { deps: ['jQuery'], exports: '$.fn.carousel' },
'bootstrap/collapse': { deps: ['jQuery'], exports: '$.fn.collapse' },
'bootstrap/dropdown': { deps: ['jQuery'], exports: '$.fn.dropdown' },
'bootstrap/modal': { deps: ['jQuery'], exports: '$.fn.modal' },
'bootstrap/scrollspy': { deps: ['jQuery'], exports: '$.fn.scrollspy' },
'bootstrap/tab': { deps: ['jQuery'], exports: '$.fn.tab' },
'bootstrap/tooltip': { deps: ['jQuery'], exports: '$.fn.tooltip' },
'bootstrap/popover': { deps: ['jQuery'], exports: '$.fn.popover' },
'bootstrap/transition': { deps: ['jQuery'], exports: '$.support.transition' },
'bootstrap/typeahead': { deps: ['jQuery'], exports: '$.fn.typeahead' }
}
});
This is my build file
{
appDir: '../assets',
baseUrl: './js',
mainConfigFile: '../assets/js/main.js',
dir: '../dist',
fileExclusionRegExp: /^(r|build)\.js$/,
optimizeCss: 'standard',
removeCombined: true,
paths: {
jQuery: "empty:"
},
modules:
[
{
name: 'main',
include: ['app']
},
{
name: 'pages/page1',
exclude: ['app']
}
]
}
app.js:
require(['app/mobilemenu','bootstrap/collapse']);
page.js:
require(['jQuery','bootstrap/collapse'],function($)
{
$("div").collapse();
});
Document head-section:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="/js/vendor/requirejs/require.js" data-main="/js/main.js"></script>
Before closing body-tag:
<script>
require(["main"],function(){
require(["app","pages/page1"]);
});
</script>