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.
Build
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`],
}
await service.build(options)
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.
Sitemaps
Speaking of source maps the same author of esbuild also wrote a module to support them on node: node-source-map-support.
Testing
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": {
"^.+\\.jsx?$": "./src/jest-transform.js"
},
"testEnvironment": "node",
"testPathIgnorePatterns": [
"node_modules/",
"dist/"
]
}
}
The transformer looks like this:
// Inspired by https://github.com/aelbore/esbuild-jest#readme
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) {
esbuild.buildSync({
target: 'node14',
platform: 'node',
jsxFactory: 'h',
jsxFragment: 'h',
bundle: true,
outfile: 'out-jest.js',
sourcemap: 'inline',
loader: {
'.js': 'jsx',
'.css': 'text',
},
entryPoints: [filename],
external,
})
const js = fs.readFileSync(file, 'utf-8')
fs.unlinkSync(file)
return js
},
}
Competition
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.
Published on August 20, 2020