I am working on a project in JavaScript where I am writing my code in separate files using the revealing module pattern.
I am also utilizing Gulp to concat those files together into one app.js file.
The issue I am having is when I am trying to use one module within another. Please take a look at my example code below:
My app.js file looks similar to this:
const componentOne = (function(){ ... return { myMethod: myMethod} })();
const componentTwo = (function(){ ... return { myMethod: myMethod} })();
const componentThree = (function(){ ... return { myMethod: myMethod} })();
In the individual component files, I can call componentOne.myMethod() from componentTwo and it works as expected.
However, the problem I have is when I want to call componentThree.myMethod() from within componentTwo. The error that I get is componentThree is undefined. However, when I manually modify the compiled app.js to move the componentThree code block to be above componentTwo, it works fine.
I would like to understand why this is, and if there is any way around it without using something like Browserify. Or is Browserify (or webpack, requirejs, etc.) a good solution to fix an issue like this?