Intro to esbuild
An overview of esbuild, a JS bundler up to 100x faster than its competitors.
Chapters
00:00 · Introduction
00:41 · Features
01:02 · Installation
01:51 · Command-line Interface
02:43 · Build API in TypeScript
04:06 · Wrap Up
Transcript
Hi, everyone. It's Nono here, and this is an overview on ESBuild.
It's an extremely fast JavaScript bundler that is apparently faster than Webpack or Rollup and allows us to get resources that our application needs to run and bundle them, minify them, and compile them in a way in which we can deploy them to the web or to other environments such as Node.js.
If we see this animation, ESBuild seems to build 10 copies of the 3.js library a lot of times, I think 10 times faster than other libraries such as Parcel, Rollup, and Webpack. ESBuild is really fast, and we're going to see it today.
Features
Let's see a few properties of ESBuild. It is a fast JavaScript bundler. It's written in Go, so that's Golang, the language developed by Google, and can work in JavaScript, Go, and the CLI. You can compile code from TypeScript, right?
Installation
It has native TypeScript support, and here's how you install it.
We can either install it locally in a project with npm install save development ESBuild and call the binary that would be inside of our NodeModels folder, and we can ask for the version, or we can install it globally in your system and just install globally and then run the globally available binary, and then we'll get the same version.
ESBuild has two main APIs.
One is a transform API, and the other one is the build API. The transform API operates on a single string without access to a file system, so it's something that you run on the command line, for instance, and the build API actually lets you operate on one or more files in your file system.
This is something you would do if you have a web app and you want to get files that are written maybe in TypeScript or somewhere else and then compile the bundled assets that you want to deploy to the web.
Command-line Interface
Then how do we use it? So we can use the transform API in the command line. So we'll run, for example, an echo command.
So we print something, and then with that slash, right, we're printing here that piece of TypeScript code, and then we run ESBuild with the TypeScript loader in that piece of text that is being printed, and then we get this, right?
So we get JavaScript code that can run on the browser or anywhere. And then we have the build API that we can also run on the command line in which we can write the same TypeScript code into a TypeScript file, in this case, in.ts, and then we can run the ESBuild program into that file and then outputting a JavaScript file.
In this case, we don't specify the loader because the extension of the file already specifies it. And then, you know, we can take a look at out.js and we would get the same JavaScript code done before.
Build API in TypeScript
And if we take a look at the build API in TypeScript, how you would build it for real or use it for real if you're compiling an application and running a command is that you will specify a build.config.mjs file. This is your kind of model definition file.
You import ESBuild as a module that you have installed as an NPM model locally on your project.
And then you would specify the entry point of your application, whether you want a bundle, where the files need to be output to the target, whether you want to watch the project and plugins and stuff.
And then lastly, you would use the build API from the command line, but using that model file that we've defined. So you'll do node.esbuild.config.mjs.
Dev is for having a development flag, tsc is for TypeScript, and then watch is the watch flag.
This works because we have behind on the code that we saw earlier, right?
We actually are loading ESBuild and this is a script.
So we don't really need to run the ESBuild binary anymore because we're loading ESBuild as a node package inside of our JavaScript application.
And this is in a nutshell a scheme of what you would have to define if you want to compile your project. And, you know, we'll see in other videos more in depth how to do this.
Wrap up
I hope that this gave you a good idea of what ESBuild is used for.
And I would invite you to watch some of my other videos on how to actually get your hands dirty and do a hands-on coding exercise with ESBuild into building a React and TypeScript application.
Thanks a lot for watching and I'll see you next time.