From 5580c979f1b7de312b91123fa36a9a169d0fff28 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 12 Jan 2018 22:48:58 -0500
Subject: [PATCH] Loosen Babel preset to use browserslist (#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 ee2db707faa8b9ada3e7a668e8a94944f5955a1e.

* Set browsers to ie9
---
 packages/babel-preset-react-app/index.js | 17 +++++++----------
 packages/react-scripts/scripts/init.js   | 12 ++++++------
 tasks/e2e-kitchensink.sh                 |  4 ++++
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js
index bce9b72f7cc..4c9daa7161a 100644
--- a/packages/babel-preset-react-app/index.js
+++ b/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,
         },
@@ -104,7 +101,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,
         },
       ],
diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js
index 27b214e6431..7854a803771 100644
--- a/packages/react-scripts/scripts/init.js
+++ b/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'),
diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh
index 7b17163ca9e..a1e1ccc9d42 100755
--- a/tasks/e2e-kitchensink.sh
+++ b/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"