How does es6 module loading work

Question

I've been reading about es6 module loaders and I just don't quite understand how it works and am hoping someone can enlighten me.

In the practical workflows link above they have an example like this

System.import('app/app').then(function(app) {
  // app is now the Module object with exports as getters
});

No problem with that - I get it. But then I see stuff like this

var $ = require('jquery');

and get really confused. What happens if at the time of this call jquery has not yet been transferred to the browser? Does the thread just spin? Does the browser parse your script behind-the-scenes and reform it into a callback like RequireJs does? Is what it does configurable? Are there specific limitations?

Can someone give me a rundown?

Answer 1

The ES6 Module Loader will fetch the source, determine dependencies, and wait until those dependencies have loaded before executing the module. So by the time the require executes, the dependency is already sitting there waiting to be executed.

When loading CommonJS through an ES6 module loader, we rely on statically parsing out the require statements from the source, and only executing the source once those requires have loaded.

In this way we can support CommonJS in the browser loaded dynamically. Circular references are treated identically to the way they are handled in Node.

The regular expressions parsing out the require are actually pretty reliable and quick, while taking into account comments and surrounding tokens. See https://github.com/systemjs/systemjs/blob/master/lib/extension-cjs.js#L10 for the one used by SystemJS.

There is one remaining limitation with this approach and that is dynamic and conditional CommonJS requires like if (condition) require('some' + 'name') aren't detected properly. This is a necessary cost though to make CommonJS behave as a fully asynchronous module format in the browser.