Loosen Babel preset to use browserslist (facebook#3770)

* Provide better defaults * Let babel determine features to compile * meh * Remove setting of BABEL_ENV * Revert "Remove setting of BABEL_ENV" This reverts commit ee2db70. * Set browsers to ie9

Author: Timer

packages/babel-preset-react-app/index.js

@@ -46,15 +46,12 @@ module.exports = function(api, opts) {
  // Latest stable ECMAScript features
  require('@babel/preset-env').default,
  {
- targets: {
- // React parses on ie 9, so we should too
- ie: 9,
- },
- // We currently minify with uglify
- // Remove after https://github.com/mishoo/UglifyJS2/issues/448
- forceAllTransforms: true,
- // Disable polyfill transforms
- useBuiltIns: false,
+ // `entry` transforms `@babel/polyfill` into individual requires for
+ // the targeted browsers. This is safer than `usage` which performs
+ // static code analysis to determine what's required.
+ // This is probably a fine default to help trim down bundles when
+ // end-users inevitably import '@babel/polyfill'.
+ useBuiltIns: 'entry',
  // Do not transform modules to CJS
  modules: false,
  },
@@ -108,7 +105,7 @@ module.exports = function(api, opts) {
  !isEnvTest && [
  require('@babel/plugin-transform-regenerator').default,
  {
- // Async functions are converted to generators by babel-preset-env
+ // Async functions are converted to generators by @babel/preset-env
  async: false,
  },
  ],

packages/react-scripts/scripts/init.js

@@ -43,12 +43,12 @@ module.exports = function(
  eject: 'react-scripts eject',
  };
 
- appPackage.browserslist = [
- '>1%',
- 'last 4 versions',
- 'Firefox ESR',
- 'not ie < 9',
- ];
+ appPackage.browserslist = {
+ development: ['chrome', 'firefox', 'edge'].map(
+  browser => `last 2 ${browser} versions`
+ ),
+ production: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 11'],
+ };
 
  fs.writeFileSync(
  path.join(appPath, 'package.json'),

tasks/e2e-kitchensink.sh

@@ -22,6 +22,7 @@ original_yarn_registry_url=`yarn config get registry`
 
 function cleanup {
  echo 'Cleaning up.'
+ unset BROWSERSLIST
  ps -ef | grep 'react-scripts' | grep -v grep | awk '{print $2}' | xargs kill -9
  cd "$root_path"
  # TODO: fix "Device or resource busy" and remove ``|| $CI`
@@ -114,6 +115,9 @@ yarn add test-integrity@^2.0.1
 # Enter the app directory
 cd "$temp_app_path/test-kitchensink"
 
+# In kitchensink, we want to test all transforms
+export BROWSERSLIST='ie 9'
+
 # Link to test module
 npm link "$temp_module_path/node_modules/test-integrity"