babel-polyfill按需加载

babel的官方文档有介绍，Babel只转换语法(如箭头函数)，对于Promise 、新的原生方法如 String.padStart (left-pad) 等其并不进行转换，所以，如果你使用了这些方法，在有些浏览器中就可能出现不支持的情况。为了解决这个不支持的问题，需要引入babel-polyfill来修复。通过如下方式

import 'babel-polyfill';

添加babel-polyfill到你的文件入口，相当于为不支持的语法打一个补丁。

这样做虽然能解决问题，但是如果我在项目中只使用Array.from这一个语法，它也会将全部的babel-polyfill文件包引入，导致项目体积过大，这显然不是想要的结果。

所以呢，我们可以手动地来引入自己所需要的包，例如我需要兼容es6所有的数组和object的语法，可以如下方式引入

import 'core-js/es6/array';
import 'core-js/es6/object';

这样就实现了按需引入。但是如果项目入口太多或者是依赖关系比较多，一个一个这样写，仍然是非常麻烦。

这时候，可以使用babel7来解决按需引入的问题。

babel7官方文档介绍：使用指南

在babel7的babel-preset-env中可以配置对哪些浏览器版本需要进行转换。

const presets = [
  ["@babel/env", {
    targets: {
      edge: "17",
      firefox: "60",
      chrome: "67",
      safari: "11.1"
    }
  }]
];

按需加载babel-polyfill的配置项是useBuiltIns，其有usage、entry和false三个值，默认为false。当指定为useBuiltIns: usage时，表示使用到的语法才会导入相关的polyfill，这样就实现了babel-polyfill按需加载。

配置如下：

const presets = [
  ["@babel/env", {
    targets: {
      edge: "17",
      firefox: "60",
      chrome: "67",
      safari: "11.1"
    },
    useBuiltIns: 'usage'
  }]
];