Build A Library With esbuild

How to bundle ESM, IIFE or CommonJS libraries with esbuild.

Photo by Colin Watts on Unsplash

I recently developed plugins and, migrated all the utilities of DeckDeckGo to build these with esbuild.

If you are looking to do the same, hope this tutorial helps you get started!

Introduction

esbuild is “an extremely fast JavaScript bundler” made by Evan Wallace. It is its tagline and, according my tests, the least we can say is that it is true. It is blazing fast ⚡️.

Sometimes while migrating my libraries, I even found myself waiting for the end of a build because I did not notice that it was already finished. I assumed it would still need some more time, old habits die hard I guess 😅.

In addition, other things which make me really like this new bundler are its clean, flexible API and, its documentation. It is easy to follow and, clear.

Setup

To get started, let’s create a new empty project.

mkdir mylib && cd mylib && npm init --yes

You can use esbuild to bundle libraries from vanilla JavaScript source files but, at least in this tutorial, we are going to use TypeScript too. That’s why, in addition to the bundler, we also install it and rimraf, to remove the output folder before any new build.

npm i esbuild typescript rimraf --save-dev

At the root of our project, we create a ./tsconfig.json file to indicates that the directory is the root of a TypeScript project.

{
  "compilerOptions": {
    "declaration": true,
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "strict": true,
    "noImplicitAny": false,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "outDir": "lib"
  }
}

In the above configuration, I set esnext to target the most recent ES standard and, also set declaration to true . esbuild not generating the declarations, we are going to generate these using the tsc command.

We update our ./package.json with a script to build our library and, we define a new types entry which should point to the types declarations.

{
  "name": "mylib",
  "version"…