New Year, New Bundler

Over the past few weeks I’ve been writing a lot of code. I’ve been working on the modeling tool, playing around with a new idea around APIs, teaching some friends to code via building a game in Godot as well as writing some open source code.

All of this new code prompted me to think about bootstrapping new projects and the tools that I use. In the past I’ve relied heavily on Babel and Webpack, which were huge improvement over the previous generation of js tools. But it’s 2023 and there are some new players out there. Here’s what I’ve learned:

The old guard

Babel: used to transpile code to standard js. In the past I’ve used it for transpiling ESNEXT to older, more supported versions of JavaScript. I’ve also used it to transpile JSX to JavaScript. In 2023, compiling to older versions of JavaScript is less of a concern for me as browsers have gotten a lot better with compatability.

Webpack: Used to bundle up JavaScript and CSS. While webpack is better than its predecessors like gulp and grunt, its configuration system is obtuse and I always seem to run into problems when I need to do anything webpack related. It’s become a major frustration.

New new kids

As I was looking into alternatives, two kept popping up: Speedy Web Compiler (swc) and esbuild. Both of these tools can both bundle and compile JavaScript, JSX, and TypeScript. The benchmarks for both tools look way faster than Webpack.

I started off trying to get a project up and running with swc. I think there’s a lot of momentum behind this project, but I wasn’t able to get eslint working (I would have had to install babel, which kind of defeats the purpose).

I was able to get esbuild working though. There are some nice plugins for all of the tools that I like to use (jest, typescript, react, etc).

Neither of these projects is able to generate typescript type definitions yet. This is fine if you’re building a regular app, but if you’re building a library exporting those type definitions is necessary. There’s a project to get this working in swc, so I’m keeping my eye on it closely.

Other contenders

A few other tools that came up in my search were Parcel, Rollup and Vite. My impression of these is that they are more full-fledged development environments, which is not what I was looking for, but I haven’t done much research into them yet. If I should take a closer look let me know.

Future proofing my toolchain

So in the end I’m going with esbuild for now. I’m excited to see where swc goes, and if it can incorporate a faster typescript compiler I will probably switch over when that’s available.

I like building stuff, but staying up to date on this minutiae feels like a chore. While I’m excited for the improvements I’ll get from esbuild on future projects, a big frustration is that I still have several older ones that I’ll need to either port over or keep dealing with webpack and babel.

With that in mind, I built a tool (of course)). It’s a code generator for bootstrapping new projects but has an upgrade system. If the underlying template changes (eg. I switch to swc in the future), I can run one command to update existing projects to the new tools. Check it out and let me know what you think!