DEV Community

loading...

Watch and build code with esbuild

obnoxiousnerd profile image Pranav Karawale Updated on ・2 min read

How I found esbuild to be great

I think you must be aware of esbuild(if not, check it out), the next-gen, ultra-fast bundler for JavaScript and TypeScript written in Go. When I first landed on the GitHub page, I thinked of trying it out. So I quickly opened VSCode which had my current project using Rollup. So I quickly swapped Rollup with esbuild and voila, built in <500 ms!! A significant increase from the built in >25s that Rollup shows up. I decided to just start using it right away. But, esbuild has not its own watch mode, for now. I mean, its a MVP for now, but no worries, I got you covered.

Let's code!!

For this, I will be using

  • TypeScript (if you dont know, just ignore the ':' and '<>' things and everything will be okay),
  • ts-node, for running scripts,
  • esbuild (of course!)
  • chokidar, for watching files

The very first thing,

$ npm i typescript ts-node esbuild chokidar -D
Enter fullscreen mode Exit fullscreen mode

Then, create a file under scripts/watch-code.ts(of course you need not go by that), and first import all the things we need:
Code

Then, the utility functions:
2

You might wonder, why do we need that noop() at the first glance. But look deeper, and you understand it. In the second function, updateLine(), we are taking in the second parameter isBuiltInput to prevent gibberish. For example:

You saved the code:

built in 452ms
Enter fullscreen mode Exit fullscreen mode

Then comes an error after sometime:

ERROR: jfkjdfgkfd
sdsdsdfsadfds(just an example)
Enter fullscreen mode Exit fullscreen mode

You resolve it and save it...

ERROR: jfkjdfgkfd
sdsdsdfsadfds(just an example)Built in 125ms.
//                            ^ Oops?!
Enter fullscreen mode Exit fullscreen mode

In order to prevent this, we set the cursor position exactly one line below the "Watching your files..." line, and clear the garbage after the cursor, and print the good old Built in x ms message.

After this, enter the build() function:
3
To get that options list, look at the full list of build options for more info.

And then, we just write something that runs all that stuff we discussed above:
4
Now that you have everything, why not run it out! To do that, go to package.json, and do this:

"scripts": {
  "watch": "ts-node-script scripts/watch-code.ts"
}
Enter fullscreen mode Exit fullscreen mode

Now you are the most powerful programmer. Go ahead, type some code, do mistakes, resolve them, and that bundles right after you hit Ctrl+S/+S.

In case you are in a hurry..

Copy the code and paste it!

Discussion

pic
Editor guide
Collapse
rw3iss profile image
Ryan Weiss

Cool dude, how about a link to the full source? You don't show the include/require statements and it's a bit confusing to pull it all together.

Collapse
obnoxiousnerd profile image
Pranav Karawale Author

Added the full source! Thank you @rw3iss for the feedback!

Collapse
rw3iss profile image
Ryan Weiss

Nice one! Thank you.

Collapse
obnoxiousnerd profile image
Pranav Karawale Author

Yes Ryan, I will include a link to the source code real quick

Collapse
elthrasher profile image
Matt Morgan

Hi Pranav, great article! I've been trying to figure out the best workflow for fullstack esbuild and this is super helpful.