The source
My src has the following structure :
src
|-- index.html
|-- js
| |-- amdconfig.js
| |-- main.js
| |-- ...
|-- lib
|-- require
| |-- require.js
|-- d3
| |-- d3.js
|-- luciad
|-- ...
My index.html contains the following code :
<script src="./lib/requirejs/require.js" type="text/javascript"></script><!-- require.js -->
<script src="./js/amdconfig.js" type="text/javascript"></script><!-- require.js config -->
<script type="text/javascript">
require(["app/js/main"]); /* main module */
</script>
My amdconfig.js file contains the following code :
(function(configure, app) {
var lib = [app, "lib"].join("/");
configure({
baseUrl : app,
urlArgs : "bust=" + (new Date()).getTime(),
packages : [{
name : "requirejs",
location : [lib, "requirejs"].join("/")
}, {
name : "luciad",
location : [lib, "luciad"].join("/")
}, {
name : "d3",
location : [lib, "d3"].join("/")
}, {
name : "app",
location : app
}],
cache : {}
})
})(
require.config ? require.config /* RequireJS */ : require, /* Dojo */
'.'
)
My build script
I have a build script with the following structure :
builder
|-- build.js
|-- package.json
If has the following code :
require('requirejs').optimize({
baseUrl: '../src',
paths: {
main: 'main',
requirejs : './lib/requirejs',
luciad : './lib/luciad',
d3 : './lib/d3',
app : './'
},
name: 'js/main',
out : '../dist/main.js',
optimize: "uglify2",
uglify2: {
output: {
beautify: false
},
compress: {},
warnings: true,
mangle: true
}
}, function (buildResponse) {
console.log(buildResponse);
});
My problem
The build script does produce a minified main.js file and outputs the list of included files in the console, as expected.
However, when I replace the main.js of my src with the main.js I just generated, nothing happens. My app doesn't start and I'm not getting any errors.
What am I missing here?
Note
If I don't minify my code, I get the same behavior.
The generated file consists of a whole bunch of modules in this format :
define('namespaced/path',["dependency1", "dependency2"], function(a,b){...});
I suppose that is the expected format...
I managed to figure out what caused my issue.
The produced output looked something this :
Note the last line. There, my main module is called
js/main. However, my main module is called in my HTML file like this :So, what happened, was that
require(["app/js/main"])failed silently because it couldn't find a module namedapp/js/main.The solution was surprisingly simple. All I had to do, was rename the
nameparameter fromjs/maintoapp/js/main. Now, everything works as expected.I don't know how I could have missed this, but I guess the silent fail of
require(["app/js/main"])didn't exactly help.