Use browserslist with esbuild.

Allows you to use browserslist and pass the correct browsers to esbuild's target option.

You have to install the browserslist package as well in your project:

npm install --save-dev browserslist browserslist-to-esbuild

or

yarn add --dev browserslist browserslist-to-esbuild

You can call browserslistToEsbuild() directly in your esbuild.mjs script, it will look for your browserslist config in either package.json or the .browserslistrc.

It will return an esbuild-compatible array of browsers.

import { build } from 'esbuild'
import browserslistToEsbuild from 'browserslist-to-esbuild'

await build({
  entryPoints: ['input.js'],
  outfile: 'output.js',
  bundle: true,
  target: browserslistToEsbuild(), // --> ["chrome79", "edge92", "firefox91", "safari13.1"]
})

Otherwise, you can pass yourself a browserslist string or array to the function.

browserslistToEsbuild('>0.2%, not dead')

Type: string | string[] | undefined

A string or array of strings of browsers compatible with browserslist. If none is passed, a browserslist config is searched in the script running directory.

Type: object | undefined

An object containing the options that will be forwarded to browserslist. You can check out the browserslist options documentation to see all the options available.

You can also use this package on the cli to test out the command in your project. If no argument is passed, the browserslist config is searched in the script running directory.

Here is some example usage:

$ npx browserslist-to-esbuild
chrome109 edge118 firefox115 ios15.6 opera102 safari15.6

$ npx browserslist-to-esbuild '>0.2%, not dead'
chrome103 edge87 firefox115 ios12.2 opera102 safari14.1

$ npx browserslist-to-esbuild '>0.2%' 'not dead'
chrome103 edge87 firefox115 ios12.2 opera102 safari14.1