Create-react-app: Browserslist config does not affect build output.

[jaworek]

Is this a bug report?

No

Which terms did you search for in User Guide?

I checked "browserlists" query. I read "Supported Browsers and Features", but it is not specified if change to browserslist config will have effect on the build process without need to eject project.

I tried to look for issues and configuration instructions related to browserslist in official create-react-app documentation, as well as on other portals such as stackoverflow. I haven't found any reports that help me solve my problem.

Environment

System:
OS: macOS 10.14.2
CPU: x64 Intel(R) Core(TM) i7-3720QM CPU @ 2.60GHz
Binaries:
Node: 10.12.0 - /usr/local/bin/node
Yarn: 1.12.3 - ~/.yarn/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 71.0.3578.80
Firefox: 63.0
Safari: 12.0.2
npmPackages:
react: ^16.6.3 => 16.6.3
react-dom: ^16.6.3 => 16.6.3
react-scripts: 2.1.1 => 2.1.1
npmGlobalPackages:
create-react-app: 1.4.1

Steps to Reproduce

1. Create new react app with create-react-app.
2. Install source map explorer using instructions from here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
3. Build application.
4. Check bundle size.
5. Change default browserslist setup to eg. "last 2 chrome versions" (this is the one that I'm trying to use, but this also happens with ">5%" and so on).
6. Build again.
7. Check bundle size again.

Expected Behavior

Modern JS such as const, let and arrow functions, etc. should not be transpiled.

Actual Behavior

After specifying different browser target in browserslist build output does not change. You can still see vars in the output.

[Timer]

This is expected. Browserslist only affects the CSS and produces no change to the JavaScript.

We'll be adding a modern build mode soon!

[jaworek]

Thanks for the info. Couldn't find explanation anywhere.

[Bnaya]

@Timer, is there any tracking issue for configurable preset-env/modern build mode ?
Thanks!

[NeoLegends]

This is expected. Browserslist only affects the CSS and produces no change to the JavaScript.

@jaworek Could you explain why this is the case? Is it making the build process too complicated otherwise (especially with Uglify only supporting ES5, as far as I'm aware)?

[jaworek]

@NeoLegends I'm writing an app that is going to be run only on modern Chromium web browsers, so there is no need for me to transpile my code down to ES5.

Also, newest versions of webpack use Terser instead of Uglify, which supports ES6+.

[NeoLegends]

Ah sorry, I pinged the wrong person. I meant to ping @Timer.