How to transpile at the speed of light 💫


For every developer there comes the moment where speed matters. It saves you a relevant amount of time and keeps the flow going.

esbuild is definitely fast and reduces the built time significantly. And it is nice and simple too, when it comes to set up.


It can be started from command line or nicely being integrated in a node.js script like this:

const esbuild = require('esbuild')

const options = {
  target: 'node12',
  platform: 'node',
  jsxFactory: 'h',
  jsxFragment: 'hh',
  bundle: true,
  outfile: 'out.js',
  sourcemap: 'inline',
  loader: {
    '.js': 'jsx',
    '.css': 'text',
  entryPoints: [`${sitePath}/index.js`],


This will build a single JS file containing everything that is needed to run. It also translates JSX and uses the function h to create elements. It also loads files ending on .css as plain text. A source map will be written as well. All this is done in a fragment of a second! This is because esbuild is written in Go instead of Javascript, because speed matters sometimes.


Speaking of source maps the same author of esbuild also wrote a module to support them on node: node-source-map-support.


Now the setup is almost complete, but how about testing? I usually use jest for testing and therefore I wanted to get it working here as well. The solutions available did not fit my case, therefore I wrote my own transform:

First make sure to tell Jest what to do in a package.json section:

  "jest": {
    "transform": {
: "./src/jest-transform.js" }, "testEnvironment": "node", "testPathIgnorePatterns": [ "node_modules/", "dist/" ] } }

The transformer looks like this:

// Inspired by

const fs = require('node:fs')
const esbuild = require('esbuild')
const pkg = require('../package.json')

const external = [
  ...Object.keys(pkg.dependencies ?? {}),
  ...Object.keys(pkg.devDependencies ?? {}),
  ...Object.keys(pkg.peerDependencies ?? {}),

module.exports = {

  getCacheKey() { // Forces to ignore Jest cache
    return Math.random().toString()

  process(content, filename) {
      target: 'node14',
      platform: 'node',
      jsxFactory: 'h',
      jsxFragment: 'h',
      bundle: true,
      outfile: 'out-jest.js',
      sourcemap: 'inline',
      loader: {
        '.js': 'jsx',
        '.css': 'text',
      entryPoints: [filename],
    const js = fs.readFileSync(file, 'utf-8')
    return js


Why would you want to you use esbuild and not webpack, babel, rollup, etc.? Well, because it is fast and easy to use. The other solutions are blown up and become pretty complex after a while. They have many 3rd party dependencies, which can cause troubles as well.

If you want to experience the blatant acceleration, then try esbuild.

Photo by Traf on Unsplash

Published on August 20, 2020

Back to posts listing