Migrating from gulp to esbuild

Esbuild is the new cool kid in the bundler world.
It is super fast since its written in Go and comes with a lot of builtin features for modern frontend development.

So i wanted to try it myself and migrated a former gulp build to esbuild.

But as it showed the gulp build was not so modern, as it was just Sass and Javascript minification. No ES6, No React, no JSX with inline styles.

So Esbuild was not working out of the box but needed some extra config and the Sass plugin.

npm i -d esbuild esbuild-plugin-sass

Also I had to rewrite the Javascript to use ES6 modules, but this was fortunatly easy.

When using a plugin we need to create our own build file and configure esbuild to use the Sass plugin.
esbuild.js:

const esbuild = require('esbuild');
const sassPlugin = require('esbuild-plugin-sass');

esbuild.build({
  entryPoints: ["main.js"],
  bundle: true,
  minify: true,
  format: 'iife',
  platform: 'browser',
  outfile:"main.min.js",
  plugins: [sassPlugin()]
}).catch((err) => {
  console.log(err)
})

Ok, but where are the Sass files now?
With ES6 you can import styles and then esbuild & the sassPlugin can follow this path from the entrypoint file and create the CSS file from the source Sass file.

So in main.js import the styles:

import $ from 'jquery'
import './style.scss'
...

Now you can call the esbuild.js file:

node ./esbuild.js

(Yeah no file watchers here, just manual trigger ;))

This will bundle the javascript to main.min.js and also create a main.min.css file.

Then include this in your HTML

<link rel="stylesheet" href="/main.min.css"> 
<script src="/main.min.js"></script>

and you are done. :)

Related posts: