This video is available to students only

Setting up ESBuild

Why do we need to bundle our code, and how can ESBuild help?

With the code of our library is complete, we need a way of making it consumable by other developers. To build our library we'll be using ESBuild, which is a JavaScript bundler.

"What is a JavaScript bundler?", you may ask.

A JavaScript bundler is a tool that combines all of our code and any dependencies and creates a single or a few files that consumers can import. Bundlers allow us to organize our code however we want. This isn't all a bundler does though. Other features include:

  • Importing and merging files in order of dependencies

  • Exporting multiple JavaScript module types for different environments (lesson 2 of this module dives into this topic!)

  • Minifying code to reduce the file size of our JavaScript

  • Tree-shaking to remove any 'dead' or unused code

  • Including any assets like CSS, SVGs, fonts, etc

  • Code-splitting to group related code in a file

Image showing a bundler taking multiple files, and produce a subset of those files.

What is ESBuild?#

ESBuild is fairly new to the scene compared to many of the other popular bundlers like Webpack or Rollup. Bundlers are notoriously slow due to the sheer amount of work they perform; big projects can take minutes to bundle. ESBuild was created to fix this problem. What takes other bundlers seconds or minutes may take ESBuild milliseconds. This is possible for a few reasons: ESBuild was written using the Go programming language which compiles to native code, it uses parallelism extensively, and memory is more efficiently used. Though ESBuild is still in a pre-1.0 release (not production-ready), I feel confident in the direction it is headed and development is moving fast towards a stable 1.0 release.

A screenshot of the esbuild website.
 

This page is a preview of Creating React Libraries from Scratch

No discussions yet