# How to configure esbuild with a build script

In this article, I will show how to use build scripts in esbuild. So far in this series, we've been using command-line (CLI) arguments to configure our builds. As our configuration is growing, it can become cumbersome. And what's even more important, some esbuild features - such as plugins - are not available from CLI.

# Goal
I want to keep the npm scripts set up in the [dev sever part](https://how-to.dev/how-to-set-up-a-dev-server-with-esbuild). Plus, I still want to avoid code duplication.

# Executable script

First, let's start by adding an executable file. The easiest way will be:
```sh
$ touch build.js
(no output)
$ chmod +x build.js
(no output)
```

To make the file executable with node, we have to start the file with:
```js
#!/usr/bin/env node
```

We can add a simple console.log to see if it works as expected:
```js
console.log('test');
```

With all this in place, we can call it directly from the terminal:
```sh
$ ./build.js 
test
```

(thanks to @[BenVida](@lacikawiz) for pointing it our in a [comment](https://how-to.dev/how-to-build-solidjs-application-with-esbuild#cks8laqbt07u222s19ja01dlr) to other article).

# Basic build script

Now, we can make the build script work for our basic case `npm run build`. Let's set the `build.js` set:
```js
#!/usr/bin/env node

require("esbuild")
  .build({
    logLevel: "info",
    entryPoints: ["src/index.js"],
    bundle: true,
    outfile: "www/main.js",
  })
  .catch(() => process.exit(1));
```

A longer discussion of the basic build is my [older post](https://how-to.dev/how-to-manage-complex-configuration-of-esbuild).

# npm scripts update
We can already use this script via `npm run build`, and we can update `package.json`:
```json
{
  ...
  "scripts": {
    ...
    "build": "./build.js",
...
```

With this, our build works:
```sh
$ npm run build

> esbuild-tutorial@1.0.0 build /home/marcin/workspace/github/esbuild-tutorial
> ./build.js


  www/main.js   151b 
  www/main.css   44b 

⚡ Done in 2ms
tuxy [npm run build] ~/workspace/github/esbuild-tutorial                                                                                                                  8:09
tuxy% npm run watch

> esbuild-tutorial@1.0.0 watch /home/marcin/workspace/github/esbuild-tutorial
```

But unfortunately, the parameters we add for *watch* or *start* are ignored:

```sh
$ npm run build -- --watch


> esbuild-tutorial@1.0.0 build /home/marcin/workspace/github/esbuild-tutorial
> ./build.js "--watch"


  www/main.js   151b 
  www/main.css   44b 

⚡ Done in 2ms
```

# Links

[Repo](https://github.com/marcin-wosinek/esbuild-tutorial), [branch](https://github.com/marcin-wosinek/esbuild-tutorial/tree/step-4).

You can check out my [video course about esbuild](https://bit.ly/esbuild-course).

# Summary
In this article, we have started refactoring towards build script with esbuild. The current script works fine for our build script, and I will address the other two in next article in this series.

%%[esbuild]