Beyond the script tag: what the heck's a Bundler and why would you use one?

Modern JavaScript development can be confusing — especially the jump from learning to include JavaScript via a <script> tag to a workflow with JavaScript tools like bundlers. I mean what even is a bundler? Why do I need to use one? Here's a quick explainer of why we bundle with some Glitch examples you can explore.

The original purpose of bundlers was to take all your development Javascript and bundle it into a single file. But these days common bundlers like Webpack, Rollup, and Parcel do much more.

So why do we use them? The "explain it like i'm five" explanation I give is "it turns the stuff you made into stuff the browser likes"

A basic example

Let's start with an example that doesn't use a bundler: hello-express on Glitch.

It has a JavaScript file public/script.js. It's served by an Express server and included on the webpage with a script tag <script src="/script.js" defer></script>. The JavaScript you write in public/script.js is the JavaScript that runs in the browser.

This works great so far, but here are some situations where a bundler might come in handy.

I want to use ✨ new JavaScript

JavaScript is an ever-evolving language. And the JavaScript version that runs in the browser is often behind the newest version of the language available. And some browsers support new JavaScript better than others.

What to do? Well, you can use the newest JavaScript and have your bundler run a compiler to translate it (called transpiling) into more browser-friendly JavaScript. The most popular one is called Babel.

For example, here is hello-parcel-simple. It uses a bundler called Parcel that by default applies Babel transforms without any configuration.

The cool thing about Parcel is we're still using that script tag, but Parcel reads it and automatically applies Babel as well as a few other things. Parcel is a great choice if you definitely don't want to configure anything.

📂 I want to organize my code into separate files and folders

script.js is fine for hello-website. It just has a single function that prints "hello world" to the console. But when you start making an entire full stack app, that file could get pretty long and complicated.

A newer JavaScript feature that can come in handy is modules. This allows you to divide your JavaScript into many different files and import as needed. While browser support for modules is growing, it's still uneven. To complicate things further there are multiple js implementations of modules with different syntax.

The art of organizing code could be an entire separate article. So let's go with a typical example. The React docs have one that's organized with each component in a separate file.

📂 components/
└ Avatar.js
└ Feed.js
└ FeedStory.js
└ Profile.js
└ ProfileHeader.js

The bundler then takes all those and puts them into one file, so that all browsers can run the code correctly.

If you'd like to use modules, you can use a bundler that's focused on converting the CommonJS syntax to browser friendly Javascript. Here's hello-rollup that uses a bundler called Rollup. It takes the main.js file and any code it imports and bundles it into one file.

🛍 🛒 I want to install and use a bunch of code I didn't write 🛒

Don't we all. Let's say you want to use React. You can include it with a script tag, but if you're running more than just basic React, managing via script tag can get complicated fast.

So let's say you have a file called button.js that uses React.

import React, { Component } from 'react';
class Button extends Component {
  render() {
    // ...
  }
}
export default Button; // Don’t forget to use export default!

Your button won't work without React. Luckily a bundler can make sure when it makes the bundle, it also includes all dependencies like React.

For example, here's a project that uses the Parcel bundler to include React:

🔨 I want to use tools like TypeScript, SASS, CSS Modules, etc.

So you want to style your new components. You could do it via the style.css file, but what if you want to use tools like SASS or CSS modules? The bundler can turn it into code the browser can understand.

Here is an example that uses the Webpack bundler to turn TypeScript to JavaScript (it's called transpiling):

🐎 I want my code to load faster!

Now our code is getting a bit complicated, so we probably want to use some tools to make our file size smaller. It would require a whole other article to really dive into these topics but here are a few strategies:

• Minification: Ever looked at the browser developer tools and noticed some JavaScript was all one line? That’s minified code. And it’s smaller (and thus faster to download and parse) The original code wasn't written that way, the bundler converted it.
• Tree shaking: No, not like literal trees — your code's structure. And shaking to dislodge the parts that are not connected to anything. In this case, we’re talking about unused code, so your final bundle is smaller.
• Code splitting: Originally bundlers bundled your JavaScript into one file, but now some can bundle into multiple files. That way, you only serve the files needed by a particular page, browser, etc. An example is the module-nomodule pattern

🎁 Other goodies

Most bundlers can also do chores that task runners do (Grunt, Gulp). These might include copying assets or renaming files.

To bundle or not?

As you can see, bundlers can do a lot! They are an essential part of the web development process of many websites including Glitch. If you're interested in trying different bundlers, here's a collection of some of our favorite Glitch bundler apps to remix.

We're launching some exciting new features on Glitch real soon. Be the first to know.

Comments

[〄]

I love this article but was so sad when my app was down during the Glitch outage :( I hope Glitch is stable in the future, like it usually is.