How to Quickly Set Up ESBuild

How to Quickly Set Up ESBuild

A quick look at how to get started with ESBuild
Ferenc Almasi β€’ 2022 August 12 β€’ πŸ“– 4 min read

ESBuild, the extremely fast JavaScript bundler was written by Evan Wallace in Go, and first revealed in 2020. On it's official homepage, ESBuild mentions that the current frontend build tools are 10-100x slower than they could be. And ESBuild tries to break this chain by significantly speeding up build processes. But is it so?

Why ESbuild is so fast?

There is more than one reason for ESBuild's fast speed. It's entirely written from scratch in Go and compiles to native code. Go heavily uses parallelism and can share memory between threads which makes it a better fit for performance compared to JavaScript (which many bundlers are written in).

It's also important to mention that writing it from scratch allowed performance optimizations right from the very start, which may not be the top priority for other libraries. This also means a consistent data structure which means there is no need for expensive conversions which slow things down even more.

These are some of the reasons ESBuild is able to outperform other bundlers. Does that mean that ESBuild is faster than most build tools, eg. Webpack? β€” Yes, due to the nature of how ESBuild was written (and the fact that it was written in Go), means it is faster than Webpack or other JavaScript-based bundlers.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

How do I Set Up ESBuild?

Let's see how you can actually set up ESBuild to use it in your project. First, you will need to add esbuild as a dependency to your project by running the following in your terminal:

npm i esbuild

Now we can use the esbuild command in our package.json file to bundle the app with an entry file. Let's say you have an app.js file at the root of your project that acts as an entry file, with the following code:

const app = {
  greet() {
    console.log('Hello πŸ‘‹')
  }
}

app.greet()
app.js
Copied to clipboard!

To bundle the code for production using ESBuild, we can add the following build script to our package.json file:

"scripts": {
    "build": "esbuild app.js --bundle --minify --outfile=bundle.js"
}
package.json
Copied to clipboard!

This will generate a bundle.js file next to app.js which will be minified and transpiled down to a lower version for better compatibility.

(()=>{var e={greet(){console.log("Hello \u{1F44B}")}};e.greet();})();
bundle.js The generated bundle file
Copied to clipboard!

Of course, keeping track of the build script this way quickly becomes hard to manage due to the number of options, and any additional logic if needed.

Because of this, we can also use the ESBuild's API to create a build.js script file and define everything inside it. The above command would translate to the following:

require('esbuild').build({
    entryPoints: ['app.js'],
    outfile: 'bundle.js',
    bundle: true,
    minify: true
}).catch(() => process.exit(1))
build.js
Copied to clipboard!

Make sure you include a catch clause to ensure that when the process exits with an error, it is reported. Notice that you can define multiple entry points in case you need multiple separate files to be generated.


How to Use ESBuild with React

A more common use case however is using ESBuild with a popular UI library, such as React. The only thing we need to change to make it work is to point the entry file to the necessary React entry point, and ESBuild will do the rest.

require('esbuild').build({
    entryPoints: ['app.jsx'],
    outfile: 'bundle.js',
    bundle: true,
    minify: true
}).catch(() => process.exit(1))
build.js Point your entry file to your React app and ESBuild will do the rest
Copied to clipboard!
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

How to Compile TypeScript in ESBuild

ESBuild is also capable of handling TypeScript out of the box. This means that in order to use TypeScript, you only need to rename your files to either .ts or .tsx, depending on your setup, and you are good to go.

const app = {
  greet(): string {
    return 'Hello πŸ‘‹'
  }
}

console.log(app.greet())
app.js Don't forget to also update your entry file in your build script
Copied to clipboard!

Conclusion

Should I use ESBuild? Is it ready for a production build? As of now, ESBuild is still below version 1.0, which means it currently lacks a stable version. This makes it risky to use it in a production environment, as there could easily be breaking changes in it's API.

So if you are looking to try out ESBuild on your own, there is nothing spotting you, but don't use it in production environments just yet. If you are looking for more throughout documentation, make sure you check out the official docs.

Do you already have experience with using ESBuild? Let us know in the comments below! Thank you for reading through, happy coding!

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended