esbuild rules for Bazel

The esbuild rules runs the esbuild bundler tool with Bazel. esbuild is an extremely fast JavaScript bundler written in Go, its current benchmarks show it can be 320x faster that other bundlers

Installation

Add the @bazel/esbuild npm packages to your devDependencies in package.json.

npm install --save-dev @bazel/esbuild

or using yarn

yarn add -D @bazel/esbuild

Add an http_archive fetching the esbuild binary for each platform that you need to support.

_ESBUILD_VERSION = "0.12.1"  # reminder: update SHAs below when changing this value
http_archive(
    name = "esbuild_darwin",
    urls = [
        "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-%s.tgz" % _ESBUILD_VERSION,
    ],
    strip_prefix = "package",
    build_file_content = """exports_files(["bin/esbuild"])""",
    sha256 = "efb34692bfa34db61139eb8e46cd6cf767a42048f41c8108267279aaf58a948f",
)

http_archive(
    name = "esbuild_windows",
    urls = [
        "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-%s.tgz" % _ESBUILD_VERSION,
    ],
    strip_prefix = "package",
    build_file_content = """exports_files(["esbuild.exe"])""",
    sha256 = "10439647b11c7fd1d9647fd98d022fe2188b4877d2d0b4acbe857f4e764b17a9",
)

http_archive(
    name = "esbuild_linux",
    urls = [
        "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-%s.tgz" % _ESBUILD_VERSION,
    ],
    strip_prefix = "package",
    build_file_content = """exports_files(["bin/esbuild"])""",
    sha256 = "de8409b90ec3c018ffd899b49ed5fc462c61b8c702ea0f9da013e0e1cd71549a",
)

These can then be referenced on the tool attribute of the esbuild rule.

esbuild(
    name = "bundle",
    ...
    tool = select({
        "@bazel_tools//src/conditions:darwin": "@esbuild_darwin//:bin/esbuild",
        "@bazel_tools//src/conditions:windows": "@esbuild_windows//:esbuild.exe",
        "@bazel_tools//src/conditions:linux_x86_64": "@esbuild_linux//:bin/esbuild",
    }),
)

It might be useful to wrap this locally in a macro for better reuseability, see packages/esbuild/test/tests.bzl for an example.

The esbuild rule can take a JS or TS dependency tree and bundle it to a single file, or split across multiple files, outputting a directory.

load("//packages/esbuild:index.bzl", "esbuild")
load("//packages/typescript:index.bzl", "ts_library")

ts_library(
    name = "lib",
    srcs = ["a.ts"],
)

esbuild(
    name = "bundle",
    entry_point = "a.ts",
    deps = [":lib"],
)

The above will create three output files, bundle.js, bundle.js.map and bundle_metadata.json which contains the bundle metadata to aid in debugging and resoloution tracing.

To create a code split bundle, set splitting = True on the esbuild rule.

load("//packages/esbuild:index.bzl", "esbuild")
load("//packages/typescript:index.bzl", "ts_library")

ts_library(
    name = "lib",
    srcs = ["a.ts"],
    deps = [
        "@npm//foo",
    ],
)

esbuild(
    name = "bundle",
    entry_point = "a.ts",
    deps = [":lib"],
    splitting = True,
)

This will create an output directory containing all the code split chunks, along with their sourcemaps files

Rules

esbuild

Runs the esbuild bundler under Bazel

For further information about esbuild, see https://esbuild.github.io/

Example usage (generated)

load("@npm//@bazel/esbuild:index.bzl", "esbuild")

esbuild(
    # A unique name for this target.
    name = "",
    # Internal use only
    launcher = "",
    # An executable for the esbuild binary
    tool = "",
)

name

A unique name for this target.

args

A list of extra arguments that are included in the call to esbuild. $(location ...) can be used to resolve the path to a Bazel target.

define

A list of global identifier replacements. Example:

esbuild(
    name = "bundle",
    define = [
        "process.env.NODE_ENV=\"production\""
    ],
)

See https://esbuild.github.io/api/#define for more details

deps

A list of direct dependencies that are required to build the bundle

entry_point

The bundle's entry point (e.g. your main.js or app.js or index.js)

This is a shortcut for the entry_points attribute with a single entry. Specify either this attribute or entry_point, but not both.

entry_points

The bundle's entry points (e.g. your main.js or app.js or index.js)

Specify either this attribute or entry_point, but not both.

external

A list of module names that are treated as external and not included in the resulting bundle

See https://esbuild.github.io/api/#external for more details

format

The output format of the bundle, defaults to iife when platform is browser and cjs when platform is node. If performing code splitting or multiple entry_points are specified, defaults to esm.

See https://esbuild.github.io/api/#format for more details

launcher

Internal use only

Link the workspace root to the bin_dir to support absolute requires like 'my_wksp/path/to/file'. If source files need to be required then they can be copied to the bin_dir with copy_to_bin.

max_threads

Sets the GOMAXPROCS variable to limit the number of threads that esbuild can run with. This can be useful if running many esbuild rule invocations in parallel, which has the potential to cause slowdown. For general use, leave this attribute unset.

minify

Minifies the bundle with the built in minification. Removes whitespace, shortens identifieres and uses equivalent but shorter syntax.

Sets all --minify-* flags

See https://esbuild.github.io/api/#minify for more details

output

Name of the output file when bundling

output_css

Declare a .css file will be output next to output bundle.

If your JS code contains import statements that import .css files, esbuild will place the content in a file next to the main output file, which you'll need to declare. If your output file is named 'foo.js', you should set this to 'foo.css'.

output_dir

If true, esbuild produces an output directory containing all the output files from code splitting for multiple entry points

See https://esbuild.github.io/api/#splitting and https://esbuild.github.io/api/#entry-points for more details

output_map

Name of the output source map when bundling

platform

The platform to bundle for.

See https://esbuild.github.io/api/#platform for more details

sourcemap

Defines where sourcemaps are output and how they are included in the bundle. By default, a separate .js.map file is generated and referenced by the bundle. If 'external', a separate .js.map file is generated but not referenced by the bundle. If 'inline', a sourcemap is generated and its contents are inlined into the bundle (and no external sourcemap file is created). If 'both', a sourcemap is inlined and a .js.map file is created.

See https://esbuild.github.io/api/#sourcemap for more details

sources_content

If False, omits the sourcesContent field from generated source maps

See https://esbuild.github.io/api/#sources-content for more details

srcs

Source files to be made available to esbuild

target

Environment target (e.g. es2017, chrome58, firefox57, safari11, edge16, node10, esnext). Default es2015.

See https://esbuild.github.io/api/#target for more details

tool

An executable for the esbuild binary