Do I still need a module loader if I'm using ES6 modules?

Question

Unfortunately my knowledge of JavaScript module loaders is still growing and I'm trying to understand their relationship to the new ES6 Modules. As far as I can tell using a module loader like CommonJS or RequireJS using ES5 compliant JavaScript really needed the use of an asynchronous module loader to increase performance and load only as needed using the respective module loader's syntax.

However looking at the ES6 module documentation and reading other information, it appears to me that module loading is natively supported via the import and export keywords. If this is the case am I correct that ES6 JS modules natively support asynchronous module loading and therefore I do not need to use an additional tool like CommonJS or RequireJS?

Dialytic

Careful using the word native — native in what context? import/export statements aren't officially supported in browsers/node etc yet, but are supported with transpilers like Babel (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) – Eck

@Supersharp Behind a flag, surely? Browser module loading spec isn't finalized so I'd be surprised if this was mainline – Hardihood

Answer 1

it appears to me that module loading is natively supported via the import and export keywords.

Not exactly. The import and export declarations only define the dependencies and the interface of each module. They allow to statically extract strings that name the required modules, nothing else.

If this is the case, do I not need to use an additional tool like CommonJS or RequireJS?

No. You still need to use a loader for ES6 modules, which resolves the names or paths or whatever from the imports to actual module files and loads them with an implementation-dependent method.

There are many tools or toolchains available, examples for the different solutions are

• webpack: bundles everything into one large script
• System.js: loads single modules dynamically and asynchronously (similar to what require.js does)
• native: node.js and web browsers are still figuring out how to support module loading without additional libraries
• babel transpilation: you can convert ES6 modules to AMD or CommonJS format and use the known tools like require.js for these

Retriever

Just to complete the loop on my understanding, if I didn't use a dynamic module loader like the ones above that would mean I'd be subject to the old school way of referencing each individual .js module file needed in my index.html file (or maybe a single file if I bundled and minified)? – Dialytic

@Dialytic Actually, old-school <script> inclusion doesn't work at all with modules (yet), it would try to parse them as old-school scripts which would fail. You need to bundle the modules into a single script. – Retriever

I should have clarified - not the individual modules in the <script> tags, but rather the transpiled .js ES5 files (I use TypeScript) would have had to be individually referenced or the bundled version correct? – Dialytic

IIRC, "ES5 modules" means commonjs syntax, so individually referencing them won't work. Either bundle them or use a commonjs loader like require.js. – Retriever

Answer 2

As far as my understanding goes, ES6 supports the syntax for defining and importing modules. The actual act of importing the modules that are required are a job of the infrastructure.

In modern browsers (as of 2016 that is) do not have built in functionality to support module loading and as such you will still need something like SystemJS to do the actual loading.

Bought

Is it on the cards for browsers to support module loading? – Tenon

Answer 3

ES6 JavaScript Files are inherently treated as a module. if you define anything in a .js file, it will only be visible within that file (local scope ). what export does is, it exposes the classes / variables defined as export, visible to outside. then you can import it to a another module. There are other ways to define modules such as using Commonjs or AMD etc.. . Module loaders are required if you want to dynamically lazy load modules. ex. Systemjs is a such a Dynamic Module loader. it will fetch the physical module file from server dynamically when it is requested, and will prevent having multiple loads the same file. in SPA application in past had to load everything at the beginning to it to work. with dynamic module loaders now we can have only the files we need to do the intended job. hope this will help you.

https://github.com/systemjs/systemjs

Jinajingle