Support browserlist as target option

[tom-sherman]

I'm not sure how feasible this is because of the lack of formal spec for browserlist queries so it might not be feasible to port to Go.

[evanw]

I'm going to close this as a duplicate of #121.

I've already done the hard work of adding targets for specific browser versions to esbuild. For example, you can set the environment target to --target=chrome58,firefox57,safari11,edge16 and esbuild will do the right thing. It includes fine-grained per-feature syntax compatibility built in. When specific targets are specified, esbuild will either convert the newer syntax to older syntax as necessary or report an error and fail the build if converting that syntax isn't supported (e.g. for big integer literals).

Literally adding support for browserslist queries themselves to esbuild itself doesn't feel appropriate to me. There is already a JavaScript package that interprets the queries and converts them to a list of browser versions, with a lot of custom logic and history around it, and to me it makes more sense for people to just invoke that package instead of replicating that package's code inside esbuild. And having the esbuild package itself depend on the browserslist package would add an unnecessary dependency for most people, which I don't want to do. Also the fact that browserslist queries are dependent on the time the query was executed (e.g. > 5% in US or current node) means that your build output would change without the esbuild configuration options changing, which is a source of non-deterministic behavior that I don't want esbuild to have.

I think the best way to do this is to have esbuild provide the underlying mechanism for this via the --target option and allow the community to experiment with optional 3rd-party packages that can be used to convert a browserslist query into an esbuild target string. That preserves separation of concerns and doesn't closely couple the two projects together.

[vuolter]

I handled it this way in my (snowpack) config to collect the browser targets to pass to esbuild:

const browserslist = require('browserslist');

function getBuildTargets() {
  const SUPPORTED_BUILD_TARGETS = [
    'es',
    'chrome',
    'edge',
    'firefox',
    'ios',
    'node',
    'safari',
  ];

  const sep = ' ';
  const supported = (b) =>
    SUPPORTED_BUILD_TARGETS.some((t) => b.startsWith(t + sep))
      ? b.replace(sep, '')
      : undefined;

  return browserslist().map(supported).filter(Boolean);
}

const targets = getBuildTargets();

...

Basically, queries browserslist to get the targets and change them just a bit to be parsed correctly by esbuild (looks like whitespaces are not welcome here XD), ofc ignoring unsupported targets.

[danny007in]

I handled it this way in my (snowpack) config to collect the browser targets to pass to esbuild:

const browserslist = require('browserslist');

function getBuildTargets() {
  const SUPPORTED_BUILD_TARGETS = [
    'es',
    'chrome',
    'edge',
    'firefox',
    'ios',
    'node',
    'safari',
  ];

  const sep = ' ';
  const supported = (b) =>
    SUPPORTED_BUILD_TARGETS.some((t) => b.startsWith(t + sep))
      ? b.replace(sep, '')
      : undefined;

  return browserslist().map(supported).filter(Boolean);
}

const targets = getBuildTargets();

...

Basically, queries browserslist to get the targets and change them just a bit to be parsed correctly by esbuild (looks like whitespaces are not welcome here XD), ofc ignoring unsupported targets.

More accurately code in #121 (comment)

[marcofugaro]

I've put getBuildTargets() in an npm package you can install and made it so it can read your browserslist config from package.json as well.

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