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. Plus, I still want to avoid code duplication.

Executable script

First, let's start by adding an executable file. The easiest way will be:

$ 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:

#!/usr/bin/env node

We can add a simple console.log to see if it works as expected:

console.log('test');

With all this in place, we can call it directly from the terminal:

$ ./build.js 
test

(thanks to BenVida for pointing it our in a comment 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:

#!/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.

npm scripts update

We can already use this script via npm run build, and we can update package.json:

{
  ...
  "scripts": {
    ...
    "build": "./build.js",
...

With this, our build works:

$ 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:

$ 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, branch.

You can check out my video course about esbuild.

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.

How to configure esbuild with a build script

Comments

esbuild tutorial

How to add live reload to esbuild server

More from this blog

Changes in programming made possible with AI

Advantages of unit testing—with examples in Jasmine

Pure functions and basic tests in Jasmine

How to prepare for a job interview

How to build a demo project

Goal

Executable script

Basic build script

npm scripts update

Links

Summary

Command Palette

Comments

esbuild tutorial

How to add live reload to esbuild server

More from this blog

Goal

Executable script

Basic build script

npm scripts update

Links

Summary