JS Module Bundlers Explained-

What is a module bundler and why do you need one as a JS developer?

Alex Zito
Tiny Code Lessons
Published in
1 min readJun 8, 2016

--

The answer to no.2 is that no modern browsers currently support ES6 import statements OR node require statements, so if you try to run any JS code in the browser with imports your code won’t run.

Require has been around for a while on the Node.js side, and because that JS code is running inside the Node environment on your server, the server will know what to do with it.

Node is not installed in any modern browsers, so you need to link up all your files before you serve them up to the browser.

A module bundler itself is really just a script that transforms all of your linked JS files into one or many bundles, which are just JS files that the browser can read.

The module itself looks something like this — Basically just a chunk of code that is browser-readable that the bundle file will organize based on file dependencies.

exports.push([module.id, “html {\n background-color: turquoise; }\n”, “”]);

I hope this clears up some confusion — here are some of the most popular JS module bundlers as of 6/8/2016.

Rollup.js

Browserify

--

--

Alex Zito
Tiny Code Lessons

Software Developer + Product Manager. Interested in Travel, Culture, Economics and the Internet. Join Medium: https://tinycode.medium.com/membership