Setting Up ESBuild to Simplify Code Maintainability
Why do we need to bundle our code, and how can ESBuild help?
This lesson preview is part of the Creating React Libraries from Scratch course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Creating React Libraries from Scratch, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:07] Now that the code of our library is complete, we need a way of making it usable by other people. To deploy our code, we'll be using ESBuild, which is a JavaScript Bundler.
[00:08 - 01:01] What is a JavaScript Bundler, you ask? JavaScript Bundler is a tool that supports writing modular code by taking one or thousands of files and merging them down into a few files . This isn't all a Bundler does, though. Other features include importing files in order based on their dependencies. Exporting multiple JavaScript module types. We'll see this in lesson two. Minifying code to reduce the file size of a JavaScript. Tree-shakened or move any dead or unused code. Including the assets like CSS, SEGs, fonts, etc. And code splitting to group related code together in a file. ESBuild is fairly new to this scene compared to many of the other popular Bundlers, like webpacker roll-up. Bundlers are notoriously slow due to the sheer amount of work they need to perform. Big projects can take minutes to bundle. ESBuild was created to fix this problem. What takes out of the Bundlers seconds or minutes may take ES Build milliseconds.
[01:02 - 01:24] This is possible for a few reasons. ESBuild is written using the programming language go, which compiles the native code. It uses parallelism extensively, and memory is more efficiently used. Though ESBuild is still a pre-1.0 release, which means not production ready, I feel confident the direction it is headed and development is moving fast towards a stable 1.0 release.
[01:25 - 01:50] In a terminal, install ESBuild to our dev dependencies by running YarnAdd. ES Build-dev. Then let's add a new script for building our project. Add the following build command to your script section and package that JSON. For the time being, we'll default to some parameters. We'll say ESBuild starts in the source/index.js file. We'll tell ESBuild to bundle our code.
[01:51 - 02:09] For now, we're going to use the format of ESM. As I said, don't worry, we'll talk about this more in the next lesson. Then, "outdir", which means "out directory", where the files will be placed once bundled. We'll put in a directory called "dist", our distribution. Now, if we run YarnBuild and navigate to the "dist directory", you'll see our code bundled and ready to be used.
[02:10 - 02:43] [ sub by sk cn2 ] [ Silence ]