Why use a module bundler (for Javascript)?
Published on 2016-07-30 Modified on 2016-07-30

Trying to learn a new set of tools is a daunting task. There's a lot of moving parts to a fancy setup, especially with module bundlers like Webpack. Grabbing a boilerplate is easy, but also confusing if something doesn't work. React may even make you sad after trying it out.

I decided I had to go back and look again. Why do I even want Webpack (or Browserify, or Rollup)?

I wanted to run a modern-ish setup with the following features:

So I started off with a new project. Typical npm init and git init kind of stuff. Then for a few packages:

npm install babel-cli babel-preset-es2015 babel-preset-react

Okay, cool. Babel + some preset plugins. So now how do we use Babel? babel-cli helps us there. It could allow you to configure a compilation step in your package.json maybe like this:

"scripts": {
    "compile": "babel src/ --out-file dist/app.js"

Now npm run compile will create a newly compiled-and-concatenated JS file. With a .babelrc file created and babel-preset-* installed, I thought I was all settled.

Well, kinda. Here's the output of this on a single file written in ES6 using React:

import React from 'react';
import X from './x.jsx';

export default (function (_ref) {
  var moves = _ref.moves;

  var eachStep = moves.length > 0 ? (action, i) {
    return React.createElement(
      { key: i },
      (action.player === "user" ? "You" : "The computer") + " removed " + action.move + " sticks"
    }) : [React.createElement(
      "Begin when you're ready!"

  return React.createElement(
    { style: { "margin-top": "15px" } },

Problems galore!

Some of these things are Babel plugins, which you can find here . Which is cool.

Some of these things can't be done with Babel alone. Like npm modules. It won't be aware of them, or define them as globals for you (AFAIK there isn't a plugin to do this). So you can:

So yeah, module bundlers are helpful in larger setups, even with a bit of a learning curve/some headaches.

I highly recommend just trying to start from scratch and work your way through the setup of a module bundler. No boilerplates, and no copying configs from elsewhere. Here's an example I tried that with using Rollupjs.