Use the babel-plugin-polyfill-* packages in preset-env

packages/babel-preset-env/package.json

@@ -17,7 +17,6 @@
   "dependencies": {
     "@babel/compat-data": "workspace:^7.12.7",
     "@babel/helper-compilation-targets": "workspace:^7.12.5",
-    "@babel/helper-module-imports": "workspace:^7.12.5",
     "@babel/helper-plugin-utils": "workspace:^7.10.4",
     "@babel/helper-validator-option": "workspace:^7.12.11",
     "@babel/plugin-proposal-async-generator-functions": "workspace:^7.12.1",
@@ -79,6 +78,9 @@
     "@babel/plugin-transform-unicode-regex": "workspace:^7.12.1",
     "@babel/preset-modules": "^0.1.3",
     "@babel/types": "workspace:^7.12.11",
+    "babel-plugin-polyfill-corejs2": "^0.0.8",
+    "babel-plugin-polyfill-corejs3": "^0.0.10",
+    "babel-plugin-polyfill-regenerator": "^0.0.8",
     "core-js-compat": "^3.8.0",
     "semver": "^5.5.0"
   },

packages/babel-preset-env/src/index.js

@@ -13,12 +13,12 @@ import {
 } from "./plugins-compat-data";
 import overlappingPlugins from "@babel/compat-data/overlapping-plugins";
 
-import addCoreJS2UsagePlugin from "./polyfills/corejs2/usage-plugin";
-import addCoreJS3UsagePlugin from "./polyfills/corejs3/usage-plugin";
-import addRegeneratorUsagePlugin from "./polyfills/regenerator/usage-plugin";
-import replaceCoreJS2EntryPlugin from "./polyfills/corejs2/entry-plugin";
-import replaceCoreJS3EntryPlugin from "./polyfills/corejs3/entry-plugin";
-import removeRegeneratorEntryPlugin from "./polyfills/regenerator/entry-plugin";
+import removeRegeneratorEntryPlugin from "./polyfills/regenerator";
+import legacyBabelPolyfillPlugin from "./polyfills/babel-polyfill";
+
+import pluginCoreJS2 from "babel-plugin-polyfill-corejs2";
+import pluginCoreJS3 from "babel-plugin-polyfill-corejs3";
+import pluginRegenerator from "babel-plugin-polyfill-regenerator";
 
 import getTargets, {
   prettifyTargets,
@@ -28,7 +28,6 @@ import getTargets, {
   type InputTargets,
 } from "@babel/helper-compilation-targets";
 import availablePlugins from "./available-plugins";
-import { filterStageFromList } from "./utils";
 import { declare } from "@babel/helper-plugin-utils";
 
 import typeof ModuleTransformationsType from "./module-transformations";
@@ -41,6 +40,19 @@ export function isPluginRequired(targets: Targets, support: Targets) {
   });
 }
 
+function filterStageFromList(
+  list: { [feature: string]: Targets },
+  stageList: Set<string>,
+) {
+  return Object.keys(list).reduce((result, item) => {
+    if (!stageList.has(item)) {
+      result[item] = list[item];
+    }
+
+    return result;
+  }, {});
+}
+
 const pluginLists = {
   withProposals: {
     withoutBugfixes: pluginsList,
@@ -171,31 +183,46 @@ export const getPolyfillPlugins = ({
   const polyfillPlugins = [];
   if (useBuiltIns === "usage" || useBuiltIns === "entry") {
     const pluginOptions = {
-      corejs,
-      polyfillTargets,
+      method: `${useBuiltIns}-global`,
+      version: corejs.toString(),
+      targets: polyfillTargets,
       include,
       exclude,
       proposals,
       shippedProposals,
-      regenerator,
       debug,
     };
 
     if (corejs) {
       if (useBuiltIns === "usage") {
         if (corejs.major === 2) {
-          polyfillPlugins.push([addCoreJS2UsagePlugin, pluginOptions]);
+          polyfillPlugins.push(
+            [pluginCoreJS2, pluginOptions],
+            [legacyBabelPolyfillPlugin, { usage: true }],
+          );
         } else {
-          polyfillPlugins.push([addCoreJS3UsagePlugin, pluginOptions]);
+          polyfillPlugins.push(
+            [pluginCoreJS3, pluginOptions],
+            [legacyBabelPolyfillPlugin, { usage: true, deprecated: true }],
+          );
         }
         if (regenerator) {
-          polyfillPlugins.push([addRegeneratorUsagePlugin, pluginOptions]);
+          polyfillPlugins.push([
+            pluginRegenerator,
+            { method: "usage-global", debug },
+          ]);
         }
       } else {
         if (corejs.major === 2) {
-          polyfillPlugins.push([replaceCoreJS2EntryPlugin, pluginOptions]);
+          polyfillPlugins.push(
+            [legacyBabelPolyfillPlugin, { regenerator }],
+            [pluginCoreJS2, pluginOptions],
+          );
         } else {
-          polyfillPlugins.push([replaceCoreJS3EntryPlugin, pluginOptions]);
+          polyfillPlugins.push(
+            [pluginCoreJS3, pluginOptions],
+            [legacyBabelPolyfillPlugin, { deprecated: true }],
+          );
           if (!regenerator) {
             polyfillPlugins.push([removeRegeneratorEntryPlugin, pluginOptions]);
           }
@@ -361,9 +388,6 @@ export default declare((api, opts) => {
       console.log(
         "\nUsing polyfills: No polyfills were added, since the `useBuiltIns` option was not set.",
       );
-    } else {
-      // NOTE: Polyfill plugins are outputting debug info internally
-      console.log(`\nUsing polyfills with \`${useBuiltIns}\` option:`);
     }
   }
 

packages/babel-preset-env/src/polyfills/babel-polyfill.js

@@ -0,0 +1,63 @@
+// @flow
+
+import { getImportSource, getRequireSource, isPolyfillSource } from "./utils";
+
+import type { NodePath } from "@babel/traverse";
+
+const BABEL_POLYFILL_DEPRECATION = `
+  \`@babel/polyfill\` is deprecated. Please, use required parts of \`core-js\`
+  and \`regenerator-runtime/runtime\` separately`;
+
+const NO_DIRECT_POLYFILL_IMPORT = `
+  When setting \`useBuiltIns: 'usage'\`, polyfills are automatically imported when needed.
+  Please remove the direct import of \`SPECIFIER\` or use \`useBuiltIns: 'entry'\` instead.`;
+
+export default function ({ template }, { regenerator, deprecated, usage }) {
+  return {
+    name: "preset-env/replace-babel-polyfill",
+    visitor: {
+      ImportDeclaration(path: NodePath) {
+        const src = getImportSource(path);
+        if (usage && isPolyfillSource(src)) {
+          console.warn(NO_DIRECT_POLYFILL_IMPORT.replace("SPECIFIER", src));
+          if (!deprecated) path.remove();
+        } else if (src === "@babel/polyfill") {
+          if (deprecated) {
+            console.warn(BABEL_POLYFILL_DEPRECATION);
+          } else if (regenerator) {
+            path.replaceWithMultiple(template.ast`
+              import "core-js";
+              import "regenerator-runtime/runtime.js";
+            `);
+          } else {
+            path.replaceWith(template.ast`
+              import "core-js";
+            `);
+          }
+        }
+      },
+      Program(path: NodePath) {
+        path.get("body").forEach(bodyPath => {
+          const src = getRequireSource(bodyPath);
+          if (usage && isPolyfillSource(src)) {
+            console.warn(NO_DIRECT_POLYFILL_IMPORT.replace("SPECIFIER", src));
+            if (!deprecated) bodyPath.remove();
+          } else if (src === "@babel/polyfill") {
+            if (deprecated) {
+              console.warn(BABEL_POLYFILL_DEPRECATION);
+            } else if (regenerator) {
+              bodyPath.replaceWithMultiple(template.ast`
+                require("core-js");
+                require("regenerator-runtime/runtime.js");
+              `);
+            } else {
+              bodyPath.replaceWith(template.ast`
+                require("core-js");
+              `);
+            }
+          }
+        });
+      },
+    },
+  };
+}