nx/docs/shared/packages/esbuild/esbuild-plugin.md

The Nx Plugin for esbuild, an extremely fast JavaScript bundler.

Why should you use this plugin?

• Fast builds using esbuild.
• Type-checking using TypeScript, which esbuild does not handle.
• Intelligent package.json output.
• Additional assets for the output.

Setting up esbuild

To create a new workspace, run npx create-nx-workspace@latest --preset=npm.

{% callout type="note" title="Keep Nx Package Versions In Sync" %} Make sure to install the @nx/esbuild version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe. {% /callout %}

To add the esbuild plugin to an existing workspace, run the following:

{% tabs %} {% tab label="npm" %}

npm install -D @nx/esbuild

{% /tab %} {% tab label="yarn" %}

yarn add -D @nx/esbuild

{% /tab %} {% /tabs %}

Creating a new JS library

{% callout type="note" title="Directory Flag Behavior Changes" %} The command below uses the as-provided directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the derived option, omit the --directory flag. See the workspace layout documentation for more details. {% /callout %}

You can add a new library that builds using esbuild with:

nx g @nx/js:lib mylib --directory=libs/mylib --bundler=esbuild

This command will install the esbuild plugin if needed, and set @nx/esbuild:esbuild executor for the build target.

Adding esbuild target to existing libraries

If you already have a JS project that you want to use esbuild for, run this command:

nx g @nx/esbuild:configuration mylib

This generator validates there isn't an existing build target. If you want to overwrite the existing target you can pass the --skipValidation option.

nx g @nx/esbuild:configuration mylib --skipValidation

Using esbuild

You can run builds with:

nx build mylib

Replace mylib with the name or your project. This command works for both applications and libraries.

Copying assets

Assets are non-JS and non-TS files, such as images, CSS, etc. You can add them to the project configuration as follows.

"build": {
 "executor": "@nx/esbuild:esbuild",
  "options": {
    //...
    "assets": [
      { "input": "libs/mylib", "glob": "README.md", "output": "/" },
      { "input": "libs/mylib", "glob": "logo.png", "output": "/" },
      { "input": "libs/mylib", "glob": "docs/**/*.md", "output": "/docs" },
      //...
    ]
 }
}

Running nx build mylib outputs something like this.

dist/libs/mylib/
├── README.md
├── docs
│   ├── CONTRIBUTING.md
│   └── TESTING.md
├── index.js
├── logo.png
└── package.json

Generating a metafile

A metafile can be generated by passing the --metafile option. This file contains information about the build that can be analyzed by other tools, such as bundle buddy.

nx build mylib --metafile

This command will generate a meta.json file in the output directory.

dist/libs/mylib/
├── README.md
├── index.js
├── meta.json
└── package.json

Custom esbuild options

Extra API options for esbuild can be passed in the esbuildOptions object for your project configuration.

"build": {
  "executor": "@nx/esbuild:esbuild",
  "options": {
    //...
    "esbuildOptions": {
      "banner": { ".js": "// banner" },
      "footer": { ".js": "// footer" }
    }
  }
}

More Documentation

• Using JS