When you get to the point in your esbuild journey when you want to start using plugins, you can be surprised that all those are not available from the CLI interface. The only way of using them is from the build script, and therefore you will have to move the whole build configuration there. The documentation mentions the build script can be either in JS or GO - in this article I'll cover only the JS side.
The starting point
As an example, I'll move the CLI build command from create-react-app article in this series:
"scripts": {
....
"esbuild": "esbuild src/index.js --bundle --outfile=dist/main.js --loader:.html=text --loader:.js=jsx --loader:.svg=dataurl"
}
and replace it by a build script. The example provided by the documentation:
require('esbuild').build({
entryPoints: ['app.jsx'],
bundle: true,
outfile: 'out.js',
}).catch(() => process.exit(1))
let us start, but leaves few important things out.
Working configuration
The build script that builds our code is as follow
#! node
require("esbuild")
.build({
entryPoints: ["src/index.js"],
bundle: true,
outfile: "dist/main.js",
loader: {
".js": "jsx",
".svg": "dataurl",
".html": "text",
},
})
.catch(() => process.exit(1));
If you save it as build.js
in the top-level directory, you can run:
$ chmod +x build.js
If you compare how both scripts work, you will see one difference:
% npm run esbuild
> esbuild-cra@0.1.0 esbuild
> esbuild src/index.js --bundle --outfile=dist/main.js --loader:.html=text --loader:.js=jsx --loader:.svg=dataurl
dist/main.js 903.0kb
dist/main.css 1019b
⚡ Done in 60ms
% ./build.js
% (no output)
If you like the default logging level that is set for CLI build, you need to add:
require("esbuild")
.build({
logLevel: "info",
...
// rest of the configuration
after this change, the build.js
runs like:
% ./build.js
dist/main.js 903.0kb
dist/main.css 1019b
⚡ Done in 62ms
Video course
You can check out my course about esbuild.
Summary
In this article, we have seen how to move non-trivial esbuild command from CLI parameters to JS script. You can find the complete code - the app & the build script in this repo+branch