My project workspace looks something like this.
Modules
|--> Src
| |--> Application
| | |--> Application.js
| |--> Home
| | |--> Home.js
| |--> Utils
| | |--> Utils.js
|--> Vendors
| |--> Underscore
| | |--> Underscore.js
| |--> jQuery
| | |--> jQuery.js
| |--> Require
| | |--> require.js
|--> r.js
I am using r.js library to uglify and bundle all above files, but it is not working for me.
// build.js
({
baseUrl: 'Modules/'
, include: ["../main"]
, optimize: 'uglify'
, out: 'build/bundle.js'
, wrap: true
})
// main.js
require.config({
"paths": {
"Application": "Src/Application/Application",
"Home": "Src/Home/Home",
"Utils": "Src/Utils/Utils",
"Underscore": "Vendor/Underscore/Underscore",
}
})
//Command to optimize files using r.js.
node path/to/r.js -o build.js
After executing the above command the minified file looks like below.
//javascript.min.js (Actual Result)
(function () {
reuiqre.config({
paths: {
"Application": "Src/Application/Application",
"Home": "Src/Home/Home",
"Utils": "Src/Utils/Utils"
}
});
define("../main", function(){});
}());
Where as I expect something like this.
//javascript.min.js (Expected result)
(function(){
/* START => underscore.js, jquery and other libraries code
3RD PARTY LIBRARIES
END =>underscore.js, jquery and other libraries code
*/
define('Home', ['Deps'], function(dep){ /** Content */ });
define('Utils', ['Deps'], function(dep){ /** Content */ });
define('Application', ['Deps'], function(dep){ /** Content */ });
}());
Can someone please tell me whether this can be achieved by using r.js or not ?
Thanks