Using Loadjs opposed to Require.js / Common.js in ES6

[panoply]

It is my understanding that Loadjs is a module loader. Working with ES6, Babel will transform your code and use (in most cases) hook in a module loader like Require.js or Commonjs to handle your imports and this is part of the reason I choose to opt out of using es6 modules, because imo, require / common while appropriate, are out-dated.

Enter Loadjs – By far by one of my most favourite little components. My question is as follows, would it (or is it) possible to use loadjs to transform es6 modules? e.g: Instead of transforming with Require.js / Common.js? Take the below situation:

ES6

import jQuery from 'jquery'

Babel > ES2015

 define(['jQuery'], function(jquery) {

  });

Using Loadjs, transform would be as follows:

loadjs(['jQuery'], {
success: function(){ 
   // here
   }
});

I was hoping someone could clarify if this is possible to do? My schedule is brutal and I've never played with transpilers, but if this in theory iis possible to do and viable, would this not be a far better solution opposed to relying on monolithic, ancient modules loaded like Require.js / Common.js (well at least until es6 support becomes the standard) to transform modules from ES6 into es2015.

Further Reading My most recent project I used E6 Babel and instead of including a transform plugin like requirejs / common.js I instead just built a simple wrapper around loadjs. The build included Turbolinks which is why I built the wrapper, but what I found is I was using loadjs as I would es6 Modules:

Firstly, here is the wrapper:

class Loadjs {

   constructor(options) {

      this.modules = options.modules;
      this.bundle = options.bundle;
      this.async = options.async;
      this.eval = options.eval;

   }

   ready(callback) {

      if(!loadjs.isDefined(this.bundle)) {

         if (this.eval) {
            loadjs(this.modules, this.bundle, {
               async: this.async
            });
         } else {

            loadjs(this.modules, this.bundle, {
               async: this.async,
               before: function(path, el) {
                  //document.body.appendChild(el);
                  for (let key of path) {
                     el.setAttribute('data-turbolinks-eval', 'false')
                  }
                  //return false;
               }
            });
         }
      }

      loadjs.ready(this.bundle, {
         success: callback
      });
   }
}

What this would allow to do is the following, firstly I would call in the component e.g:

const Carousel = new Loadjs({
    bundle: 'swiper',
    modules: ['/assets/js/component/swiper.min.js'],
    async: false,
    eval: false
});

And when I required the component, I would init (as I would using loadjs)

Carousel.ready(() =>{
   new swiper();
});

Of course you don't need this wrapper, loadjs ships with this functionality, I needed to attach attributes to component script files to prevent evaluation by Turbolinks, hence why I required it. However, the fact remains, I am achieving virtually what I would if I was to opt in and use es6 modules. Which begs me to ask to question again, could loadjs be used as a transform plugin by babel to transform es6 modules into es2015 code.

@amorey as always you poet, I'd love to hear your thoughts regarding this.

[amorey]

@panoply Thanks for your comment and for sharing your LoadJS wrapper code! I've been thinking about how to implement a plugin system for MUI and this gives me some ideas to work with.

Just to make sure I understand your question - are you asking if it's possible to modify Babel so that it uses LoadJS under the hood to implement module imports?

[panoply]

Hey! Andres,

Awesome! Glad it could give you some ideas. And yes, this is exactly what I mean, using loadjs under the hood for babel to import modules. - It's just such a powerful little loader, would love to see be used more globally.

Sent from my iPhone

On 4 Jun 2017, at 15:55, Andres Morey notifications@github.com wrote:

@panoply Thanks for your comment and for sharing your LoadJS wrapper code! I've been thinking about how to implement a plugin system for MUI and this gives me some ideas to work with.

Just to make sure I understand your question - are you asking if it's possible to modify Babel so that it uses LoadJS under the hood to implement module imports?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.