docs/esbuild.md

---
title: esbuild
layout: default
toc: true
nav: rule
---
<!-- *********************
  DO NOT EDIT THIS FILE
  It is a generated build output from Stardoc.
  Instead you must edit the .bzl file where the rules are declared,
  or possibly a markdown file next to the .bzl file
 ********************* -->
# esbuild rules for Bazel

The esbuild rules runs the [esbuild](https://github.com/evanw/esbuild) bundler tool with Bazel.
esbuild is an extremely fast JavaScript bundler written in Go, its [current benchmarks](https://esbuild.github.io/faq/#benchmark-details) 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. 

```python
_ESBUILD_VERSION = "0.11.6"  # 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 = "2b06365b075b854654fc9ed26fcd48a0c38947e1c8d5151ce400cd1e173bb138",
)

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 = "ddab1121833f0a12ca4fb3e288231e058f5526310671e84c0a9aa575340bb20b",
)

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 = "34612e3e15e6c31d9d742d3fd677bd5208b7e5c0ee9c93809999138c6c5c1039",
)
```

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

```python
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. 

```python
load("@npm//@bazel/esbuild:index.bzl", "esbuild")
load("@npm//@bazel/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.

```python
load("@npm//@bazel/esbuild:index.bzl", "esbuild")
load("@npm//@bazel/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


## esbuild

**USAGE**

<pre>
esbuild(<a href="#esbuild-name">name</a>, <a href="#esbuild-args">args</a>, <a href="#esbuild-define">define</a>, <a href="#esbuild-deps">deps</a>, <a href="#esbuild-entry_point">entry_point</a>, <a href="#esbuild-external">external</a>, <a href="#esbuild-format">format</a>, <a href="#esbuild-launcher">launcher</a>, <a href="#esbuild-link_workspace_root">link_workspace_root</a>,
        <a href="#esbuild-max_threads">max_threads</a>, <a href="#esbuild-minify">minify</a>, <a href="#esbuild-output">output</a>, <a href="#esbuild-output_css">output_css</a>, <a href="#esbuild-output_dir">output_dir</a>, <a href="#esbuild-output_map">output_map</a>, <a href="#esbuild-platform">platform</a>, <a href="#esbuild-sourcemap">sourcemap</a>,
        <a href="#esbuild-sources_content">sources_content</a>, <a href="#esbuild-srcs">srcs</a>, <a href="#esbuild-target">target</a>, <a href="#esbuild-tool">tool</a>)
</pre>

Runs the esbuild bundler under Bazel

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

**ATTRIBUTES**


<h4 id="esbuild-name">name</h4>

(*<a href="https://bazel.build/docs/build-ref.html#name">Name</a>, mandatory*): A unique name for this target.


<h4 id="esbuild-args">args</h4>

(*List of strings*): 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.

Defaults to `[]`

<h4 id="esbuild-define">define</h4>

(*List of strings*): A list of global identifier replacements.
Example:
```python
esbuild(
    name = "bundle",
    define = [
        "process.env.NODE_ENV=\"production\""
    ],
)
```

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

Defaults to `[]`

<h4 id="esbuild-deps">deps</h4>

(*<a href="https://bazel.build/docs/build-ref.html#labels">List of labels</a>*): A list of direct dependencies that are required to build the bundle

Defaults to `[]`

<h4 id="esbuild-entry_point">entry_point</h4>

(*<a href="https://bazel.build/docs/build-ref.html#labels">Label</a>, mandatory*): The bundle's entry point (e.g. your main.js or app.js or index.js)


<h4 id="esbuild-external">external</h4>

(*List of strings*): 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

Defaults to `[]`

<h4 id="esbuild-format">format</h4>

(*String*): The output format of the bundle, defaults to iife when platform is browser
and cjs when platform is node. If performing code splitting, defaults to esm.

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

Defaults to `""`

<h4 id="esbuild-launcher">launcher</h4>

(*<a href="https://bazel.build/docs/build-ref.html#labels">Label</a>, mandatory*): Internal use only


<h4 id="esbuild-link_workspace_root">link_workspace_root</h4>

(*Boolean*): 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.

Defaults to `False`

<h4 id="esbuild-max_threads">max_threads</h4>

(*Integer*): 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.

Defaults to `0`

<h4 id="esbuild-minify">minify</h4>

(*Boolean*): 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

Defaults to `False`

<h4 id="esbuild-output">output</h4>

(*<a href="https://bazel.build/docs/build-ref.html#labels">Label</a>*): Name of the output file when bundling


<h4 id="esbuild-output_css">output_css</h4>

(*<a href="https://bazel.build/docs/build-ref.html#labels">Label</a>*): 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'.


<h4 id="esbuild-output_dir">output_dir</h4>

(*Boolean*): If true, esbuild produces an output directory containing all the output files from code splitting

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

Defaults to `False`

<h4 id="esbuild-output_map">output_map</h4>

(*<a href="https://bazel.build/docs/build-ref.html#labels">Label</a>*): Name of the output source map when bundling


<h4 id="esbuild-platform">platform</h4>

(*String*): The platform to bundle for.

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

Defaults to `"browser"`

<h4 id="esbuild-sourcemap">sourcemap</h4>

(*String*): 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

Defaults to `""`

<h4 id="esbuild-sources_content">sources_content</h4>

(*Boolean*): If False, omits the `sourcesContent` field from generated source maps

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

Defaults to `False`

<h4 id="esbuild-srcs">srcs</h4>

(*<a href="https://bazel.build/docs/build-ref.html#labels">List of labels</a>*): Source files to be made available to esbuild

Defaults to `[]`

<h4 id="esbuild-target">target</h4>

(*String*): Environment target (e.g. es2017, chrome58, firefox57, safari11, 
edge16, node10, default esnext)

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

Defaults to `"es2015"`

<h4 id="esbuild-tool">tool</h4>

(*<a href="https://bazel.build/docs/build-ref.html#labels">Label</a>, mandatory*): An executable for the esbuild binary