Kickstart Your Development: A Beginner’s Guide to esbuild

Streamline Your Development Pipeline with Esbuild

The Challenge of Bundling JavaScript Applications

Bundling JavaScript applications can be a time-consuming and complicated process. While a single bundling process may not take long, the cumulative effect of multiple bundling processes can significantly delay your development pipeline. Moreover, bundling often requires writing a configuration file, adding to the cognitive overhead.

Introducing Esbuild: A Fast and Simple JavaScript Bundler

That’s where esbuild comes in – a fast and simple JavaScript bundler written in Go. Esbuild simplifies the bundling process, making it an ideal solution for developers looking to streamline their development pipeline.

Getting Started with Esbuild

To start using esbuild, install it using npm:

npm install esbuild

Verify the installation by invoking esbuild:

esbuild

Alternatively, you can install esbuild locally and invoke it with a full path:

npm install esbuild --save-dev

./node_modules/.bin/esbuild

Bundling TypeScript with Esbuild

Let’s start by bundling a TypeScript file using esbuild. Create a file named input_typescript.ts and add the following code:

“
// input_typescript.ts
function sayHello(name: string) {
console.log(Hello, ${name}!`);
}

sayHello(‘Alice’);
“`

Bundle the TypeScript code using the esbuild CLI:

esbuild input_typescript.ts --outfile=output.js --loader=ts

Bundling React with Esbuild

Integrating React into your project can be a complicated venture. However, with esbuild, it’s a simple process. First, install the React library using npm:

npm install react

Create a JavaScript file called App.js and add the following code:

“`
// App.js
import React from ‘eact’;
import ReactDOM from ‘eact-dom’;

const App = () => {
return

;
};

ReactDOM.render(, document.getElementById(‘root’));
“`

Create an HTML file called index.html and add the following code:

“`

“`

Bundle App.js to AppBundle.js using esbuild:

esbuild App.js --outfile=AppBundle.js --loader=jsx

Using the Build API

While you can bundle your JavaScript file using the esbuild CLI, you also have the option to use the build API. Create a JavaScript file called build.js and add the following code:

“`
// build.js
import { build } from ‘esbuild’;

build({
entryPoints: [‘input_typescript.ts’],
outfile: ‘output.js’,
loader: ‘ts’,
}).then(() => {
console.log(‘Build complete!’);
});
“`

Execute the bundling process with Node.js:

node build.js

Bundling CSS with Esbuild

Let’s try bundling CSS files using esbuild. Create a CSS file named color.css and add the following code:


/* color.css */
body {
background-color: rgb(255, 255, 255);
}


Create another CSS file that imports the color.css file. Name it style.css and add the following code:

“`
/* style.css */
@import ‘./color.css’;

h1 {
color: rgb(0, 0, 0);
}
“`

Bundle the CSS files using esbuild:

esbuild style.css --outfile=out.css

Bundling Images with Esbuild

Esbuild also allows you to bundle images. Create an HTML file named images.html and add the following code:

“`

“`

Create a JavaScript file called input_image.js and add the following code:

“`
// input_image.js
import imagePNG from ‘./image.png’;
import imageJPG from ‘./image.jpg’;

console.log(imagePNG);
console.log(imageJPG);
“`

Bundle the JavaScript file using esbuild:

esbuild input_image.js --outfile=out_image.js --loader=dataurl --loader=file

Using Plugins with Esbuild

Esbuild is not a complete solution for bundling. It has default supports for React, CSS, and images, but it doesn’t support SASS out of the box. To bundle SASS files, you need to install an esbuild plugin. Let’s use the esbuild-plugin-sass plugin.

Install the plugin using npm:

npm install esbuild-plugin-sass

Create an SCSS file named style.scss and add the following code:


/* style.scss */
body {
background-color: rgb(255, 255, 255);
}


Use the esbuild-plugin-sass plugin to bundle the SCSS file:

“`
// sass_build.js
import { build } from ‘esbuild’;
import sassPlugin from ‘esbuild-plugin-sass’;

build({
entryPoints: [‘style.scss’],
outfile: ‘bundle.css’,
plugins: [sassPlugin()],
}).then(() => {
console.log(‘Build complete!’);
});
“`

Execute the bundling process with Node.js:

node sass_build.js

Watch Mode and Serve Mode

Esbuild also provides watch mode and serve mode, which allow you to bundle files automatically when they change. Create a file called watch_build.js and add the following code:

“`
// watch_build.js
import { build } from ‘esbuild’;

build({
entryPoints: [‘input_typescript.ts’],
outfile: ‘output.js’,
loader: ‘ts’,
watch: true,
}).then(() => {
console.log(‘Build complete!’);
});
“`

Execute the bundling process with Node.js:

node watch_build.js

Modify the input_typescript.ts file and check the output. The file will be updated automatically.

For serve mode, create a file called serve_build.js and add the following code:

“`
// serve_build.js
import { build } from ‘esbuild’;

build({
entryPoints: [‘input_typescript.ts’],
outfile: ‘output.js’,
loader: ‘ts’,
serve: true,
servedir: ‘public’,
}).then(() => {
console.log(‘Server started!’);
});
“`

Execute the bundling process with Node.js:

node serve_build.js

Open http://127.0.0.1:8000/index_ts.html in your browser and check the console. The bundling process will happen automatically when you modify the input_typescript.ts file.

That’s it! You’ve learned how to use esbuild to bundle TypeScript, React, CSS, image files, and SCSS files. You’ve also explored common use cases and plugins to extend esbuild’s functionality.