Search code examples
javascriptecmascript-6es6-module-loaderes6-modules

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?


Solution

  • 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