esbuild in a simple html+js use case
Tags: javascript, webdev
Published: 2021-06-02 20:20:35

In this series, I'll take a look on a simple usecase of js+html application, build with various js bundlers. After checking what's possible no bundler at all & in webpack, let's take a look on [esbuild](https://esbuild.github.io/) - interesting option among the js-bundlers.

# esbuild
Key selling point of esbuild is speed. According to their data, they are even more then 100 times faster then alternatives. As it's written in go, instead of javascript, on can hope for a significant speed increase. In a simplified demo as we have in this series, the speed difference will be unnoticeable. For production application, every second saved in build adds across whole development team & it helps developers keep rebuilding & rerunning tests as often as possible - a good habit to have on a project.

The focus on speed mean that in case of feature vs speed trade-of, the speed was a priority. So for example, for compiling ts you can only use limited part of official building options & you should limit yourself to use only the supported syntax.

# The app

![application screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xacwuk055mv5c4cdot9z.png)

same as other articles of this series, simple app with 1 component with template & data in separate files.

# Code

The html part is simple:
```html
<!-- index.html -->
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Contact App</title>
    <link rel="shortcut icon" href="#" />

    <script type="module" src="./dist/index.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>
```

contrary to for example parcel, esbuild output works just fine with `<script type="module">`.

The location of the output file, `./dist/index.js` is set in the build script. esbuild, by default will just output the file into the standard output - ie, will drop it on the screen.

Main js file:

```js
// src/index.js
import "./contact-list/contact-list";
```

note, that similar to other modern bundlers esbuild try out different extensions for use to find a file we try to load - even though it comes with performance cost.

# The component

The component is broken down into 3 files. Same as in webpack, we are able to keep each type of content with a correct extension - data in json, template in html.

```js
// src/contact-list/contact-list.js
import template from "./contact-list.html";
import contacts from "./data.json";

const contactList = document.createElement("div");

contactList.className = "contact-list";

contacts.forEach((entry) => {
  const element = document.createElement("div");
  element.className = "contact";

  element.innerHTML = template;

  element.querySelector(".name").innerHTML = entry.name;
  element.querySelector(".phone").innerHTML = entry.phone;

  contactList.appendChild(element);
});

document.body.appendChild(contactList);
```

JSON files are understood by esbuild by default, `src/contact-list/data.json`, the data file:
```json 
[
  {
    "name": "Christopher L Sanders",
    "phone": "769-232-1807"
  },
  {
    "name": "Frances J Nolte",
    "phone": "901-287-0419"
  }
]
```

HTML files, need txt loader specified for html files:
```html
<!-- src/contact-list/contact-list.html -->
<h2 class="name">name</h2>

<p class="phone">phone</p>
```
in this way, we can use them in a similar way one can be used to from webpack's `html-loader`.

# Build dependencies & configuration
For a successful build of the above code, we just need `esbuild` package. To install it, you can run:
```bash
$  npm install --save-dev esbuild
```

For easy access to build script, you can add following line to `package.json`:
``` js
  "scripts": {
    // other scripts
    "build": "esbuild src/index.js --bundle --outfile=dist/index.js --loader:.html=text"
  }
```

`--outfile` tells esbuild where to put our final bundle
`--loaders:.html=test` makes each `*.html` imported as string

Note - for complex configuration, esbuild provides node API instead of configuration file - contrary to webpack and many other bundles.

# Complete code & application example

If you want to see the application in action in the browser you can see it here:
https://marcin-wosinek.github.io/js-html-comparison-esbuild/

and for the working code example you can go here:
https://github.com/marcin-wosinek/js-html-comparison-esbuild