Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 841
atconway Avatar asked Oct 28 '16 04:10

atconway


2 Answers

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
like image 129
Bergi Avatar answered Oct 31 '22 03:10

Bergi


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.

like image 32
Robba Avatar answered Oct 31 '22 03:10

Robba