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 */
'.'
)
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);
});
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?
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 :
define('luciad/util/create',[],function(){...});
define('luciad/error/_createError',["../util/create"],function(a){...});
define('luciad/error/ProgrammingError',["./_createError"],function(a){...)});
...
define('js/main',[...],function(...){...});
Note the last line. There, my main module is called js/main
. However, my main module is called in my HTML file like this :
require(["app/js/main"]);
So, what happened, was that require(["app/js/main"])
failed silently because it couldn't find a module named app/js/main
.
The solution was surprisingly simple. All I had to do, was rename the name
parameter from js/main
to app/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.