Search code examples
javascriptmodulewebpackamdcommonjs

Why to use module bundlers over ES6 module?


Simple and maybe silly question.
Isn't it that we have modules already in ES6? but we use module bundlers again. Is it all because of supporting issues ? They give us more options or something?
thanks.


Solution

  • Current JS runtimes do not support ES6 modules. This seems confusing, since they are in the spec, but they have only been defined and not yet implemented (Edge is the only browser with any support, per MDN).

    Because we have this fancy new syntax but no browser (or node) support, some tool needs to polyfill that for now. Enter bundlers like webpack, who understand ES6 modules and provide their own implementation of System and its import capability.

    This is not unlike what lodash (and underscore) did for functional array methods, before those were implemented by most browsers, with a difference in when the polyfill happens. Because the module loading has to occur before a script runs, the bundler has to run before the script ever gets to the client.