feat: browserslist support

[privatenumber]

Is your feature request related to a problem? Please describe.

Usually browser support is defined in a browserslist file that all preprocessors look at. However, you must pass in a target manually to esbuild-loader.

Describe the solution you'd like

Automatic detection of browserslist to determine target.

Describe alternatives you've considered

Additional context

References:

• esbuild js table: https://github.com/evanw/esbuild/blob/master/internal/compat/js_table.go
• esbuild-plugin-browserslist

[marcofugaro]

I've made a package that autodetects your browserslist config and returns an esbuild-compatible browsers list you can pass to the target option.

https://github.com/marcofugaro/browserslist-to-esbuild

[jaxonly]

This does not seem to work for mobile
I tried the conversion using the following rule , and it returned null

iOS >= 9
Android >= 4.0

@marcofugaro

[marcofugaro]

@jaxonly fixed in version 1.1.0.
Keep in mind that Android 4.0 refers to the legacy android webview, which is not supported by esbuild target option.

If you put Android >= 4.0 in browserslistToEsbuild, it gets automatically bumped to Android 5.0, which is the version where Chrome was introduced as an android webview. Sources here.

[TrevorSayre]

As mentioned in evanw/esbuild#121 we have found https://github.com/nihalgonsalves/esbuild-plugin-browserslist from @nihalgonsalves to work quite nicely.

const { resolveToEsbuildTarget } = require('esbuild-plugin-browserslist');
...
// defaults to: browserslist('> 0.5%, last 2 versions, Firefox ESR, not dead')
const targets = resolveToEsbuildTarget(browserslist());

We then use targets for ESBuildMinifyPlugin and esbuild-loader.

[silverwind]

If this will be added, keep it opt-in please so the plugin stays lightweight. I personally don't consider needing browserlist in new projects and see it as a legacy mechanism.