Module Systems and Bundlers

Module Systems and Bundlers

Historically, if you wanted to manage a collection of JavaScript files you needed to manage a list of <script></script> tags, or you needed a module bundler like Webpack, Rollup, or Parcel.

Now, all modern browsers have native support for ES Modules.

ES Module Support Added

• Firefox in 2012 (v60)
• Chrome in 2017 (v61)
• Safari in 2017 (v10)
• Node.JS in 2019 (v13)
• MS Edge in 2020 (v16)

While this doesn't eliminate the need for bundlers like Webpack and Rollup, it does change when and how we use them.

The browser support has some limitations. It only understands relative and absolute paths for the module-name, and it can only load JavaScript.

This means tasks like combining JavaScript files into a single bundle and handling non-js files still require an external bundler.

If you need to run any transpilers like Bable or Typescript, you will still need a tool like Webpack and Rollup.

Next

• Use Rollup to build a JS module