The file created with r.js powered Node build script doesn't seem to do anything
Source
My src
has the following structure:
src
|-- index.html
|-- js
| |-- amdconfig.js
| |-- main.js
| |-- ...
|-- lib
|-- require
| |-- require.js
|-- d3
| |-- d3.js
|-- luciad
|-- ...
Mine 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 file amdconfig.js
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 script construct creates a minifile main.js
and lists the included files in the console as expected.
However, when I replace main.js
mine src
with the main.js
one I just generated, nothing happens. My application won't start and I don't get 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 group of modules in this format:
define('namespaced/path',["dependency1", "dependency2"], function(a,b){...});
I assume this is the expected format ...
source to share
I managed to figure out what was causing my problem.
The produced output looked something like 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(...){...});
Pay attention to 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 it require(["app/js/main"])
failed because it couldn't find a module named app/js/main
.
The solution was surprisingly simple. All I needed to do was renamed the parameter name
from js/main
to app/js/main
. Everything now works as expected.
I don't know how I could have missed this, but I think the silent glitch require(["app/js/main"])
didn't help for sure.
source to share