Strategy to determine visiting browser's inclusion or exclusion from the esbuild bundle target?

[anselmbradford]

I would like to build my bundles given a specific set of browsers and if a visitor comes to the site that is not part of that set, they would get a "no JS" experience, with minimal/simplified JS. I am currently roughly doing this by setting my bundles with the es6 target and then where scripts are loaded in the HTML, I'm checking if window.fetch is supported.

I would rather feed in a browserslist via https://github.com/marcofugaro/browserslist-to-esbuild or similar and then be able to reference a variable via window or similar that would tell me whether the visiting browser was included or excluded from esbuild target.

Any suggestions on the best practice way to accomplish the above?

[evanw]

I don't use browserslist myself so I'm not the right person to ask, sorry. A quick search found this thing for you: https://github.com/browserslist/browserslist-useragent-regexp. Does that help? Might or might not be best practice but it looks like it's made by the browserslist people.

[anselmbradford]

Ignoring browserslist for the moment, is there anything produced from esbuild that could be used to determine if a browser was inside or outside of the esbuild target? For example, the target can be a list of browser versions, like 'chrome58', 'firefox57', 'safari11', 'edge16', is there any way to determine an at minimum feature they all share?

[evanw]

Not without some manual work on your part. The internal feature compatibility tables that esbuild uses are here. They aren't intended to be used like that but you could imagine extracting that information out of them.