I have to refactor a web app legacy. They use modules in this way:
myApp = (function(){})();
I understand that in this way the module is used as a space name, since even to use another module they do this:
myApp = (function(){ otroModulo.funcion();})();
I want to refactor it so that it complies with the control investment and that it has dependency injection. Do I have to use a framework like jspm, rollup, web pack, require? or there is some simple way to do it without using such libraries.
On the other hand, I understand that there are different ways to build the modules, such as patterns (revealing, literal object, etc), even depending on the framework that is used (eg commonjs, es6, etc). At this point I need some recommendation on how to deal with the change and find what is most compatible (I understand that some browsers do not interpret es6 modules natively).
Finally I add info from the web app: It is based on MVC but uses ajax for user interaction (eg, the controller loads the index but with ajax loads the partial view)