exclude unnecessary plugins for target browsers

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

@@ -8,6 +8,8 @@
 
 const path = require('path');
 
+const getRequiredPlugins = require('./helpers/getRequiredPlugins');
+
 const validateBoolOption = (name, value, defaultValue) => {
   if (typeof value === 'undefined') {
     value = defaultValue;
@@ -64,15 +66,24 @@ module.exports = function(api, opts, env) {
     );
   }
 
+  const targets = isEnvTest ? { node: 'current' } : undefined;
+
+  // Some plugins need custom overrides which inadvertantly enables them for
+  // browsers that don't really need them. Here we check whether these plugins
+  // are actually required and skip them if they are not.
+  const {
+    'transform-destructuring': isDestructuringTransformRequired,
+    'transform-regenerator': isRegeneratorTransformRequired,
+    'proposal-object-rest-spread': isObjectRestSpreadProposalRequired,
+  } = getRequiredPlugins(targets);
+
   return {
     presets: [
       isEnvTest && [
         // ES features necessary for user's Node version
         require('@babel/preset-env').default,
         {
-          targets: {
-            node: 'current',
-          },
+          targets,
         },
       ],
       (isEnvProduction || isEnvDevelopment) && [
@@ -96,9 +107,12 @@ module.exports = function(api, opts, env) {
           // Adds component stack to warning messages
           // Adds __self attribute to JSX which React will use for some warnings
           development: isEnvDevelopment || isEnvTest,
-          // Will use the native built-in instead of trying to polyfill
+          // Use native spread when possible.
+          // Or use the native built-in instead of trying to polyfill
           // behavior for any plugins that require one.
-          useBuiltIns: true,
+          [isObjectRestSpreadProposalRequired
+            ? 'useBuiltIns'
+            : 'useSpread']: true,
         },
       ],
       isTypeScriptEnabled && [require('@babel/preset-typescript').default],
@@ -117,10 +131,11 @@ module.exports = function(api, opts, env) {
       // Experimental macros support. Will be documented after it's had some time
       // in the wild.
       require('babel-plugin-macros'),
-      // Necessary to include regardless of the environment because
-      // in practice some other transforms (such as object-rest-spread)
-      // don't work without it: https://github.com/babel/babel/issues/7215
-      [
+      // Historically there was a bug that made this plugin required.
+      // https://github.com/babel/babel/issues/7215
+      // This plugin is no longer required to make plugin-proposal-object-rest-spread work:
+      // https://github.com/babel/babel/pull/10275
+      isDestructuringTransformRequired && [
         require('@babel/plugin-transform-destructuring').default,
         {
           // Use loose mode for performance:
@@ -156,15 +171,6 @@ module.exports = function(api, opts, env) {
       ],
       // Adds Numeric Separators
       require('@babel/plugin-proposal-numeric-separator').default,
-      // The following two plugins use Object.assign directly, instead of Babel's
-      // extends helper. Note that this assumes `Object.assign` is available.
-      // { ...todo, completed: true }
-      [
-        require('@babel/plugin-proposal-object-rest-spread').default,
-        {
-          useBuiltIns: true,
-        },
-      ],
       // Polyfills the runtime needed for async/await, generators, and friends
       // https://babeljs.io/docs/en/babel-plugin-transform-runtime
       [
@@ -176,7 +182,7 @@ module.exports = function(api, opts, env) {
           // explicitly resolving to match the provided helper functions.
           // https://github.com/babel/babel/issues/10261
           version: require('@babel/runtime/package.json').version,
-          regenerator: true,
+          regenerator: isRegeneratorTransformRequired,
           // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
           // We should turn this on once the lowest version of Node LTS
           // supports ES Modules.

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

@@ -8,6 +8,8 @@
 
 const path = require('path');
 
+const getRequiredPlugins = require('./helpers/getRequiredPlugins');
+
 const validateBoolOption = (name, value, defaultValue) => {
   if (typeof value === 'undefined') {
     value = defaultValue;
@@ -60,6 +62,16 @@ module.exports = function(api, opts) {
     );
   }
 
+  const targets = isEnvTest ? { node: 'current' } : undefined;
+
+  // Some plugins need custom overrides which inadvertantly enables them for
+  // browsers that don't really need them. Here we check whether these plugins
+  // are actually required and skip them if they are not.
+  const {
+    'transform-destructuring': isDestructuringTransformRequired,
+    'transform-regenerator': isRegeneratorTransformRequired,
+  } = getRequiredPlugins(targets);
+
   return {
     // Babel assumes ES Modules, which isn't safe until CommonJS
     // dies. This changes the behavior to assume CommonJS unless
@@ -71,9 +83,7 @@ module.exports = function(api, opts) {
         // ES features necessary for user's Node version
         require('@babel/preset-env').default,
         {
-          targets: {
-            node: 'current',
-          },
+          targets,
           // Do not transform modules to CJS
           modules: false,
           // Exclude transforms that make all code slower
@@ -97,10 +107,7 @@ module.exports = function(api, opts) {
       ],
     ].filter(Boolean),
     plugins: [
-      // Necessary to include regardless of the environment because
-      // in practice some other transforms (such as object-rest-spread)
-      // don't work without it: https://github.com/babel/babel/issues/7215
-      [
+      isDestructuringTransformRequired && [
         require('@babel/plugin-transform-destructuring').default,
         {
           // Use loose mode for performance:
@@ -127,7 +134,7 @@ module.exports = function(api, opts) {
         {
           corejs: false,
           helpers: areHelpersEnabled,
-          regenerator: true,
+          regenerator: isRegeneratorTransformRequired,
           // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
           // We should turn this on once the lowest version of Node LTS
           // supports ES Modules.

packages/babel-preset-react-app/helpers/getRequiredPlugins.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+const {
+  default: getTargets,
+  isBrowsersQueryValid,
+  isRequired,
+} = require('@babel/helper-compilation-targets');
+const data = require('@babel/compat-data/plugins');
+
+// Copying normalizeTargets (because it is not exported)
+// https://github.com/babel/babel/blob/04354d155689405ba688d4b400702710f9cccc97/packages/babel-preset-env/src/normalize-options.js#L121-L129
+const normalizeTargets = targets => {
+  // TODO: Allow to use only query or strings as a targets from next breaking change.
+  if (isBrowsersQueryValid(targets)) {
+    return { browsers: targets };
+  }
+  return {
+    ...targets,
+  };
+};
+
+// Test which plugins our target browsers require
+module.exports = function getRequiredPlugins(targets) {
+  const requiredPlugins = {};
+  const currentTargets = getTargets(normalizeTargets(targets));
+  for (const name of Object.keys(data)) {
+    requiredPlugins[name] = isRequired(name, currentTargets);
+  }
+  return requiredPlugins;
+};

packages/babel-preset-react-app/package.json

@@ -12,6 +12,7 @@
     "url": "https://github.com/facebook/create-react-app/issues"
   },
   "files": [
+    "helpers/getRequiredPlugins.js",
     "create.js",
     "dependencies.js",
     "dev.js",
@@ -21,7 +22,9 @@
     "test.js"
   ],
   "dependencies": {
+    "@babel/compat-data": "7.8.1",
     "@babel/core": "7.7.5",
+    "@babel/helper-compilation-targets": "7.8.3",
     "@babel/plugin-proposal-class-properties": "7.7.4",
     "@babel/plugin-proposal-decorators": "7.7.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.7.4",