babel（7.10.0）配置案例

babel 7.10.0

useBuildIns配置说明

官方原文

1. entry : 改配置会根据环境将 你引入的 "core-js/stable"; and import "regenerator-runtime/runtime" 拆分成更细的引入。

This option enables a new plugin that replaces the import "core-js/stable"; and import "regenerator-runtime/runtime" statements (or require("core-js") and require("regenerator-runtime/runtime")) with individual requires to different core-js entry points based on environment.

2. useage: 会根据当前文件使用的新的语法和环境，在每个文件都引入对应的polyfill

Adds specific imports for polyfills when they are used in each file. We take advantage of the fact that a bundler will load the same polyfill only once.

useBuildIns:entry

1. 安装相关依赖

yarn add @babel/core@7.10.0 @babel/preset-env@7.10.0 @babel/cli@7.10.0 -D
yarn add regenerator-runtime core-js@3

2. 修改package.json的配置

{
// ... ...
  "scripts": {
    "babel": "npx origin --out-dir dist ./babel"
  }
// ... ...
}

3. 新建立如下文件
   dist
   origin/index.js
   babel.config.js
   .browserslistrc

4. 配置一：

//  babel.config.js
module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": 3
      }
    ]
  ]
}

// .browserslistrc
chrome 72

// origin/index.js
import "core-js/stable";

运行yarn babel结果如下：

// dist
"use strict";

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

require("core-js/modules/es.array.unscopables.flat-map");

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

require("core-js/modules/es.object.from-entries");

require("core-js/modules/web.immediate");
···

修改需要适配的浏览器

// .browserslistrc
chrome 73

结果如下：
```javascript
"use strict";

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

require("core-js/modules/web.immediate");

useBuildIns: usage

// 将上面的文件做如下修改

//  babel.config.js
module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

// .browserslistrc
ie 11

// origin/index.js
const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

运行yarn babel结果如下：

"use strict";

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

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

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

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

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

require("core-js/modules/web.dom-collections.iterator");

var set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

如果将需要适配的浏览器更换，再次运行yarn babel那么结果如下：

// .browserslistrc
chrome 72

结果：

"use strict";

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

babel-runtime

1. 可以根据代码中的使用到的新特性和设置的运行环境，自动按需加载，而且不会有全局污染。
2. 提供了辅助函数(helpers)，使babel在转义代码时不需要在使用时再定义，直接从模块中引入，降低代码体积。
   首先执行如下

yarn add @babel/plugin-transform-runtime@7.10.0 @babel/runtime-corejs3@7.10.0
// 这边可以yarn remove core-js@3

当你同时使用babel-preset-env和bable-runtime的时候，只需要在一个地方配置core-js，避免冲突
修改babel.config.js配置文件如下：

// babel.config.js
module.exports = {
  "presets": [
    [
      "@babel/preset-env"
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        'corejs': 3
      }
    ]
  ]
}

// .browserslistrc
ie 11

// origin/index.js
const set = new Set([1, 2, 3]);
const map = new Map([['a', 'b']]);
class A { }
const a = typeof A;
const b = [1, 2, 3].includes(2)

const c = () => { return 'c'}
async function d () {
    const e = await c()
    return e
}

运行yarn babel得到的结果如下

// dist/index.js3
"use strict";

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

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

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

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

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

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

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

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

var _context;

var set = new _set.default([1, 2, 3]);
var map = new _map.default([['a', 'b']]);

var A = function A() {
  (0, _classCallCheck2.default)(this, A);
};

var a = (0, _typeof2.default)(A);
var b = (0, _includes.default)(_context = [1, 2, 3]).call(_context, 2);

var c = function c() {
  return 'c';
};

function d() {
  return _d.apply(this, arguments);
}

function _d() {
  _d = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
    var e;
    return _regenerator.default.wrap(function _callee$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            _context2.next = 2;
            return c();

          case 2:
            e = _context2.sent;
            return _context2.abrupt("return", e);

          case 4:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee);
  }));
  return _d.apply(this, arguments);
}

我们对比下使用如下配置的结果

// babel.config.js
module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        'useBuiltIns': 'usage',
        'corejs': 3
      }
    ]
  ]
}

结果对比：

结果对比

// 会污染全局的Array.prototype
require("core-js/modules/es.array.includes");

// 不会污染全局，仅在当前执行环境中可以使用
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));

// 每次使用到都要定义
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

// 只需要引入@babel/runtime的helpers函数，减少代码体积
var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));