Hello! I’ve been writing some Javascript this week, and as always when I start
a new frontend project, I was faced with the question: should I use a build
system?

I want to talk about what’s appealing to me about build systems, why I
(usually) still don’t use them, and why I find it frustrating that some
frontend Javascript libraries require that you use a build system.

I’m writing this because most of the writing I see about JS assumes that
you’re using a build system, and it can be hard to navigate for folks like me
who write very simple small Javascript projects that don’t require a build
system.

what’s a build system?

The idea is that you have a bunch of Javascript or Typescript code, and you
want to translate it into different Javascript code before you put it on your
website.

Build systems can do lots of useful things, like:

• combining 100s of JS files into one big bundle (for efficiency reasons)
• translating Typescript into Javascript
• typechecking Typescript
• minification
• adding polyfills to support older browsers
• compiling JSX
• treeshaking (remove unused JS code to reduce file sizes)
• building CSS (like tailwind does)
• and probably lots of other important things

Because of this, if you’re building a complex frontend project today, probably you’re using a build system like webpack, rollup, esbuild, parcel, or vite.

Lots of those features are appealing to me, and I’ve used build systems in the past for some of these reasons: Mess With DNS uses esbuild to translate Typescript and combine lots of files into one big file, for example.

the goal: easily make changes to old tiny websites

I make a lot of small simple websites, I have approximately 0 maintenance energy for any of them, and I change them very infrequently.

My goal is that if I have a site that I made 3 or 5 years ago, I’d like to be able to, in 20 minutes:

• get the source from github on a new computer
• make some changes
• put it on the internet

But my experience with build systems (not just Javascript build systems!), is
that if you have a 5-year-old site, often it’s a huge pain to get the site
built again.

And because most of my websites are pretty small, the advantage of using a
build system is pretty small – I don’t really need Typescript or JSX. I can
just have one 400-line script.js file and call it a day.

example: trying to build the SQL playground

One of my sites (the sql playground) uses a build system (it’s using Vue). I last edited that project 2 years ago, on a different machine.

Let’s see if I can still easily build it today on my machine. To start out, we have to run npm install. Here’s the output I get.

$ npm install
[lots of output redacted]
npm ERR! code 1
npm ERR! path /Users/bork/work/sql-playground.wizardzines.com/node_modules/grpc
npm ERR! command failed
npm ERR! command sh /var/folders/3z/g3qrs9s96mg6r4dmzryjn3mm0000gn/T/install-b52c96ad.sh
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/i