Imagine this project scaffold:
utils.js
define([], function(){ /* My utils functions */ });
module1/controllers.js
define(['../utils'], function(utils){ /* Module1 stuff */ });
module2/controllers.js
define(['../utils'], function(utils){ /* Module2 stuff */ });
This works very well in a non-optimization context, because utils.js is downloaded only once, no matter whether is from module1 or module2. However I need to optimize and package each module in a JS file.
In order to get this, I add a main.js file in each module, for example:
module1/main.js
define(['./controllers', './services.js'], function(){});
Now I start playing with the optimization tool, this is my app.build.js
...
modules: [
{ name: "module1/main" },
{ name: "module2/main" },
]
...
Ok, I get the behaviour I wanted, but I see that both modules include the utils.js code. This behaviour is right because you can't guarantee the loading order.
So, these are my questions:
Finally I got the answer using the exclude option in the build script:
...
modules:[
{ name: 'utils' },
{ name: 'module1/main', exclude: ['utils'] }
{ name: 'module2/main', exclude: ['utils'] }
]
...
This way I create a separated module for the utils and avoid to include it in the other modules code using the option "exclude". This method forces you to write this kind of "global" dependencies manually, but it works :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With