'@babel/plugin-transform-runtime' did not delete the import of 'regenerator-runtime/runtime.js'

[myNameIsDu]

I looked at the demo on the documentation and tried it myself and found that the reference to the global was not deleted

But the example of the document is this:

"use strict";

var _regenerator = require("@babel/runtime/regenerator");

var _regenerator2 = _interopRequireDefault(_regenerator);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

var _marked = [foo].map(_regenerator2.default.mark);

function foo() {
  return _regenerator2.default.wrap(
    function foo$(_context) {
      while (1) {
        switch ((_context.prev = _context.next)) {
          case 0:
          case "end":
            return _context.stop();
        }
      }
    },
    _marked[0],
    this
  );
}

[myNameIsDu]

I think this is caused by a conflict with preset-env. I checked the test cases of transform-runtime and found that they are all similar to this configuration

{
  "plugins": ["transform-runtime", "transform-regenerator"]
}

As the official documentation says, the plugin is run before preset
But the helper is no problem

He can delete the extra helper

In addition, 'transform-runtime' also has corejs conversion capabilities, and'preset-env' also has the same, I feel quite confused
Like this'issue' said

[JackHowa]

let me know if this helps @myNameIsDu, I had a similar issue with regenerator-runtime #12598 (comment)

[myNameIsDu]

Thank you for your help, Like you, I want to explore the essence of the babel conversion syntax,But I don’t think this can solve my problem
this is my config:

    {
        "presets": [
            [
                "@babel/preset-env",
                {
                    "targets": {
                        "edge": "17",
                        "firefox": "60",
                        "chrome": "50",
                        "safari": "11.1",
                        "ie":"11"
                    },
                    "useBuiltIns": "usage",
                    "corejs":{
                        "version":3
                    },
                    modules:false
                }
            ]
        ],
        "plugins": [
            ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ]
    }

Convert these codes

var promise = Promise.resolve();
function* foo() {}
class Person {
    constructor() {
        this.name=123
    }
}

the result is:

import "core-js/modules/es.function.name.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.promise.js";
import "regenerator-runtime/runtime.js";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var _marked = /*#__PURE__*/regeneratorRuntime.mark(foo);

var promise = Promise.resolve();

function foo() {
  return regeneratorRuntime.wrap(function foo$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
        case "end":
          return _context.stop();
      }
    }
  }, _marked);
}

var Person = function Person() {
  _classCallCheck(this, Person);

  this.name = 123;
};

This is not a problem, But now I want to use transform-runtime to extract the running help code and change the global pollution of the running environment of the generator function
I added it

       "plugins": [
            ["@babel/plugin-proposal-decorators", { "legacy": true }],
            "@babel/plugin-transform-runtime"
        ]

Then run

import "core-js/modules/es.function.name.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.promise.js";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import "regenerator-runtime/runtime.js";

var _marked = /*#__PURE__*/_regeneratorRuntime.mark(foo);

var promise = Promise.resolve();

function foo() {
  return _regeneratorRuntime.wrap(function foo$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
        case "end":
          return _context.stop();
      }
    }
  }, _marked);
}

var Person = function Person() {
  _classCallCheck(this, Person);

  this.name = 123;
};

The global import of generator functions has not disappeared, but the '_classCallCheck' help function is deleted.I feel so strange
And does not match the document
There is also a problem, such as enabling the corejs parameter of transform-runtime

import "core-js/modules/es.function.name.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.promise.js";
import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
import "regenerator-runtime/runtime.js";
import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";

var _marked = /*#__PURE__*/_regeneratorRuntime.mark(foo);

var promise = _Promise.resolve();

function foo() {
  return _regeneratorRuntime.wrap(function foo$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
        case "end":
          return _context.stop();
      }
    }
  }, _marked);
}

var Person = function Person() {
  _classCallCheck(this, Person);

  this.name = 123;
};

The global promise operating environment has not disappeared. I think this is a conflict with preset-env.
Just like a test case,

{
  "plugins": ["transform-runtime", "transform-regenerator"]
}

I did not find an example that works with preset-env, So I am really puzzled

[nicolo-ribaudo]

First of all, even if there are multiple imports/requires to regenerator is not a problem: they all internally delegate to the same file, so it's not 7.3KB + 7.3KB + 7.2KB but just 7.3KB.

However, you can avoid the multiple imports by using babel-plugin-polyfill-corejs3 instead of the useBuiltIns option of @babel/preset-env. This will be the recommended way starting from Babel 8, but you can already use it now:

{
	"presets": [
		["@babel/preset-env", {
			"modules": false,
			"targets": {
				"edge": "17",
				"firefox": "60",
				"chrome": "50",
				"safari": "11.1",
				"ie": "11"
			}
		}]
	],
	"plugins": [
		"@babel/plugin-transform-runtime",
		["@babel/plugin-proposal-decorators", { "legacy": true }],
		["polyfill-corejs3", {
			"method": "usage-global",
			"targets": {
				"edge": "17",
				"firefox": "60",
				"chrome": "50",
				"safari": "11.1",
				"ie": "11"
			}
		}]
	]
}

Starting from Babel 7.13.0, you'll be able to avoid duplicating the targets option:

{
	"targets": {
		"edge": "17",
		"firefox": "60",
		"chrome": "50",
		"safari": "11.1",
		"ie": "11"
	},
	"presets": [
		["@babel/preset-env", { "modules": false }]
	],
	"plugins": [
		"@babel/plugin-transform-runtime",
		["@babel/plugin-proposal-decorators", { "legacy": true }],
		["polyfill-corejs3", { "method": "usage-global" }]
	]
}

---

EDIT: I just tested your input code with #12583, and it seems that when that PR is merged preset-env + transform-runtime will inject a single import.

[myNameIsDu]

Thanks for your answer, this is exactly what I want, thank you very much.