DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Marcin Wosinek
Marcin Wosinek

Posted on • Updated on • Originally published at how-to.dev

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. 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)
Enter fullscreen mode Exit fullscreen mode

To make the file executable with node, we have to start the file with:

#!/usr/bin/env node
Enter fullscreen mode Exit fullscreen mode

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

console.log('test');
Enter fullscreen mode Exit fullscreen mode

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

$ ./build.js 
test
Enter fullscreen mode Exit fullscreen mode

(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));
Enter fullscreen mode Exit fullscreen mode

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",
...
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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. Sign up here for info about new posts

Top comments (1)

Collapse
almahdi profile image
Al Mahdi

Check this issue(github.com/evanw/esbuild/issues/536) to learn more about using scripts.

๐ŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.