I'm making use of RequireJs, and I'm having trouble with the build.
My structure is
webroot
css
/* css here */
files
img
js
emails
verify.js
lib
jquery-1.8.3.min.js
jquery-ui.min.js
jquery.ui.selectmenu.js
modernizr.js
require.js
orders
form.js
common.js
js-build
/* expected build output here */
js-tools
app.build.js
This is a part of a CakePHP project, but the webroot is where the actual webroot of the web server will be.
node and r.js.cmd are both on my path, so I haven't included it in the js-tools directory.
When accessing the default page, the is /, but it could also appear as /orders/form. For this reason, relative Urls to the JS is an issue.
When I load the JS, I'm using
<script type="text/javascript" src="/js/lib/require.js"></script>
<script type="text/javascript">
//<![CDATA[
require(['/js/common.js'], function(common){
require(['orders/form']);
});
//]]>
</script>
This is taken from https://github.com/requirejs/example-multipage-shim.
My common.js is
requirejs.config({
"baseUrl": "/js/lib",
"paths": {
"orders": "../orders",
"emails": "../emails",
"jquery": [
"//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min",
"jquery-1.8.3.min"
],
"jquery-ui": [
"//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min",
"jquery-ui.min"
]
},
"shim": {
"jquery.ui.selectmenu": ["jquery", "jquery-ui"]
}
});
As it stands, this works when working with unoptimized code. The important feature is that js is referenced with an absolute URL, is it can be picked up by the code from either /, or /orders/form.
My app.build.js is
({
appDir: '..', /* relative to app.build.js */
mainConfigFile: '../js/common.js', /* relative to app.build.js */
baseUrl: 'js/lib', /* relative to current directory */
dir: '../js-build', /* relative to app.build.js */
optimize: 'uglify2',
paths: {
"jquery": "empty:",
"jquery-ui": "empty:",
"jquery.ui.selectmenu": "empty:",
"common": "../common",
"orders": "../orders",
"emails": "../emails"
},
modules: [
{
name: 'common',
include: [
'modernizr'
],
exclude: ['jquery-1.8.3.min', 'jquery-ui.min', 'jquery.ui.selectmenu']
},
{
name: 'orders/form',
exclude: ['common', 'jquery.ui.selectmenu']
},
{
name: 'emails/verify',
exclude: ['common', 'jquery.ui.selectmenu']
}
]
})
When optimization runs as r.js.cmd -o js-tools\app.build.js from the webroot, I get a js-build directory with a copy of the whole webroot directory, optimized. Although not ideal (I wanted to limit it to just the js directory getting optimized), I can use my Ant driven build script to copy the contents of the js-build\js directory to the correct location.
When I run the build from the command line, the generated common.js, orders/form.js and emails/verify.js all exclude jquery.ui.selectmenu. common.js has modernizr included, as well as the header from the same lib. form.js and verify.js also exclude jquery.ui.selectmenu, and are devoid of any headers.
However, when I run from my Ant script, orders/form.js and emails/verify.js include jquery.ui.selectmenu and modernizr, even though I've given specific instruction for common and jquery.ui.selectmenu to be excluded.
I've excluded jquery.ui.selectmenu, because the particular version I am working with is written the the following form, and the browser has an issue with the end jQuery variable not being available. By excluding jquery.ui.selectmenu, I can attempt to load it separately, as though it came from a CDN.
(function($, undefined) {
$.widget("ui.selectmenu", {...
});
}( jQuery ));
So, my issue is, how come the same app.build.js is resulting in different output?