Modules in JavaScript confusion

View original thread
Ibrahim Tanyalcin's photo

Thats not meant to be run on client side. For commonJS, check for instance rollup or Browserify.

<shamelessPromotion>

But, I have thought about this bundler issue for an enterprise project that has to work ie10+. I wanted to support latest ES6 stuff like promises but also fallback to rAF if necessary without any transpilation + build time. You can run this script like this:

//abc.js
!function(){
    var abc = function()
        let airPlane = {};
        airPlane.myAirPlane = "StarJet";
        taskq.export(airPlane,"airPlane");//export it airPlane with a alias
    };
    abc._taskqId = "abc"; //give it an id
    taskq.push(abc);//push to queue, it will be automatically executed when conditions are right
}();
//abcd.js
!function(){
    var abcd = function(airPlane){
        function displayAirplane(){
            console.log(airPlane.myAirPlane);
        };
        displayAirplane();
    }
    abcd._taskqId = "abcd";
    abcd_taskqWaitFor = ["abc"]; /*an array of ids that this function should wait before it executes*/
    taskq.push(abcd);
}();

then in your html:

....
<script src="abc.js" async></script>
<script src="abcd.js" async></script>
....

The above order of scripts does NOT matter, put them anywhere you like.

</shamelessPromotion>

Check for taskq in npm or in my github. I have a new version which takes a bit longer to sort the dependency tree (~1ms, but more stable), I will upload it soon. You are also able to make dynamic imports that respects the queue order, which I will not explain here for clarity.