2022-05-20

basic esbuild react

A while back I found out about esbuild, an "extremely fast JavaScript bundler". The developers aren't kidding - it can take ~10-100x less time than webpack to make a production or development bundle of a JavaScript project. I want to make a simple React project that makes use of esbuild as an experiment.

Developers usually start React web apps using Create React App, a template that contains React, Webpack, some polyfills for browser compatibility and some helper scripts. This is useful if you want to get something running quickly, but you are standing on the shoulders of giants. What I really want is start out with a minimal "core" application that I can understand and then gradually add new things to, such that I end up understanding how everything fits together. In other words, I want to play the game of "software development" on hard mode.

At its core, esbuild and webpack are compilers, but instead of compiling from a high-level language (e.g. C) to a low level language (e.g. machine code) it compiles from a high-level language (e.g. JavaScript with module imports, TypeScript, JSX) to another high-level language (JavaScript with no module imports). This can be done with the following command, which basically takes an input file "src/main.tsx" (I'm using TypeScript with JSX), combines that file with all of the other modules it imports, does some extra magic (e.g. minification, source maps) and puts it all into a single JavaScript file "public/main.js" that can be run by the browser. The names of the input and output files are totally arbitrary, you can call them whatever you want.

esbuild --bundle src/main.tsx --outfile=public/main.js

If you want to save yourself from having to type out the esbuild command all the time, you could put it in the "scripts" section of your project's package.json file, but you don't have to. It could just as well be part of a shell script or a CI task or copied and pasted into your temrinal every time.

To use the built file in a web app, you should make sure that the HTML file that will make use of the JS has a script tag in it that references the built file.

I created a repository with an empty app that uses the above approach. It's missing a lot of features, but that's kind of the point.