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 ee2db70. * Set browsers to ie9
facebook · Jan 14, 2018 · eb1b921 · eb1b921
1 parent 527fdfe
commit eb1b921
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git 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,
         },
@@ -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,
         },
       ],

diff --git 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
@@ -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"