Say first conclusion

  1. Setting useBuiltIns: Usage in preset-env introduces the associated polyfill as needed, but does not extract the common help function, and pollutes global objects and object stereotypes
  2. Add @babel/plugin-transform-runtime but core-js is set to false. The difference is that this time the common help function is extracted.
  3. On the basis of the second point, the Runtime plugin specifying core-js version 3 causes the useBuiltIns: Usage configuration to be invalid. Related polyfills are also introduced as needed, extracting common help functions without contaminating global objects and object prototypes. This configuration is suitable for packaging the NPM library.
  4. In the development of actual business requirements, it is more appropriate to adopt the second solution, but there is a related issue on Github (github.com/babel/babel…) in this mixed way. And bable team members don’t recommend this mix. But I verified that I found no problems, and vue-CLI scaffolding uses this configuration.

The validation process

The source file

const a = 1
const b = () = > {}
p = new Promise(a)class Test {}
const list = [1.2]
// A type that cannot be statically parsed
const list2 = (function a() {
  return [2]
})()
list.includes(1)
list2.includes(2)
Copy the code

Configuration useBuiltIns: false

{
    "presets": [["@babel/preset-env", {
            "targets": {},
            "useBuiltIns": false."corejs": false}}]]Copy the code

Result: only syntax translation

"use strict";

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

var b = function b() {};

p = new Promise(a);var Test = function Test() {
  _classCallCheck(this, Test);
};

var list = [1.2];

var list2 = function a() {
  return [2]; } (); list.includes(1);
list2.includes(2);
Copy the code

Configuration useBuiltIns: the usage

{
    "presets": [
        [ "@babel/preset-env", {
            "targets": {},
            "useBuiltIns": "usage",
            "corejs": 3
        }]
    ]
}
Copy the code

The resulting syntax is transformed and polyfill is introduced as needed but taints global objects and object prototypes and fails to extract common help functions such as _classCallCheck

"use strict";

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

require("core-js/modules/es.array.includes.js");

require("core-js/modules/es.string.includes.js");

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

var b = function b() {};

p = new Promise(a);var Test = function Test() {
  _classCallCheck(this, Test);
};

var list = [1.2];

var list2 = function a() {
  return [2]; } (); list.includes(1);
list2.includes(2);
Copy the code

Different configuration is that useBuiltIns in preset-env is removed and the Runtime plugin is added

{
    "presets": [["@babel/preset-env", {
            "targets": {}}]],"plugins": [["@babel/plugin-transform-runtime", {
            "corejs": false}}]]Copy the code

The result is simply to transform the syntax and extract common help functions such as _classCallCheck

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var a = 1;

var b = function b() {};

p = new Promise(a);var Test = function Test() {(0, _classCallCheck2["default"]) (this, Test);
};

var list = [1.2];

var list2 = function a() {
  return [2]; } (); list.includes(1);
list2.includes(2);
Copy the code

Add useBuiltIns:usage to the configuration above

{
    "presets": [["@babel/preset-env", {
            "targets": {},
            "useBuiltIns": "usage"."corejs": 3}]],"plugins": [["@babel/plugin-transform-runtime", {
            // "corejs": 3 }}]]Copy the code

The result is that the common help function is extracted instead of just configuring useBuiltIns: Usage

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

require("core-js/modules/es.array.includes.js");

require("core-js/modules/es.string.includes.js");

var a = 1;

var b = function b() {};

p = new Promise(a);var Test = function Test() {(0, _classCallCheck2["default"]) (this, Test);
};

var list = [1.2];

var list2 = function a() {
  return [2]; } (); list.includes(1);
list2.includes(2);
Copy the code

Configure transform-Runtime to specify core-js version 3

{
    "presets": [["@babel/preset-env", {
            "targets": {}}]],"plugins": [["@babel/plugin-transform-runtime", {
            "corejs": 3}}]]Copy the code

The resulting syntactic transformation + introduces polyfill on demand but does not contaminate global objects and object prototypes and extracts common help functions such as _classCallCheck

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));

var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));

var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));

var a = 1;

var b = function b() {};

p = new _promise["default"] ();var Test = function Test() {(0, _classCallCheck2["default"]) (this, Test);
};

var list = [1.2];

var list2 = function a() {
  return [2]; } (); (0, _includes["default"])(list).call(list, 1);
(0, _includes["default"])(list2).call(list2, 2);
Copy the code

If the value of useBuiltIns is the same as the preceding value, the useBuiltIns configuration does not take effect

{
    "presets": [["@babel/preset-env", {
            "targets": {},
            "useBuiltIns": "usage"."corejs": 3}]],"plugins": [["@babel/plugin-transform-runtime", {
            "corejs": 3}}]]Copy the code
"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));

var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));

var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));

var a = 1;

var b = function b() {};

p = new _promise["default"] ();var Test = function Test() {(0, _classCallCheck2["default"]) (this, Test);
};

var list = [1.2];

var list2 = function a() {
  return [2]; } (); (0, _includes["default"])(list).call(list, 1);
(0, _includes["default"])(list2).call(list2, 2);
Copy the code