Home » Javascript » How to get javascript files to load in the client without explicit reference to their contents in index.js

How to get javascript files to load in the client without explicit reference to their contents in index.js

Posted by: admin August 19, 2018 Leave a comment


Maybe I’m trying to do something silly, but I’ve got a web application (Angular2+), and I’m trying to build it in an extensible/modular way. In particular, I’ve got various, well, modules for lack of a better term, that I’d like to be able to include or not, depending on what kind of deployment is desired. These modules include various functionality that is implemented via extending base classes.

To simplify things, imagine there is a GenericModuleDefinition class, and there are two modules – ModuleOne.js and ModuleTwo.js. The first defines a ModuleOneDefinitionClass and instantiate an exported instance ModuleOneDefinition, and then registers it with the ModuleRegistry. The second module does an analogous thing.

(To be clear – it registers the ModuleXXXDefinition object with the ModuleRegistry when the ModuleXXX.js file is run (e.g. because some other .js file imports one of its exports). If it is not run, then clearly nothing gets registered – and this is the problem I’m having, as I describe below.)

The ModuleRegistry has some methods that will iterate over all the Modules and call their individual methods. In this example, there might be a method called ModuleRegistry.initAllModules(), which then calls the initModule() method on each of the registered Modules.

At startup, my application (say, in index.js) calls ModuleRegistry.initAllModules(). Obviously, because index.js imports the exported ModuleRegistry symbol, this will cause the ModuleRegistry.js code to get pulled in, but since none of the exports from either of the two Module .js files is explicitly referenced, these files will not have been pulled in, and so the ModuleOneDefinition and ModuleTwoDefinition objects will not have been instantiated and registered with the ModuleRegistry – so the call to initAllModules() will be for naught.

Obviously, I could just put meaningless references to each of these ModuleDefinition objects in my index.js, which would force them to be pulled in, so that they were registered by the time I call initAllModules(). But this requires changes to the index.js file depending on whether I want to deploy it with ModuleTwo or without. I was hoping to have the mere existence of the ModuleTwo.js be enough to cause the file to get pulled in and the resulting ModuleTwoDefinition to get registered with the ModuleRegistry.

Is there a standard way to handle this kind of situation? Am I stuck having to edit some global file (either index.js or some other file it references) so that it has information about all the included Modules, so that it can then go and load them? Or is there a clever way to cause JavaScript to execute all the .js files in a directory so that merely copying the files in would be enough to get them to load at startup?