babel-polyfill按需加载

该文章发布于 ,归类于 Javascript

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,其有usageentryfalse三个值,默认为false。当指定为useBuiltIns: usage时,表示使用到的语法才会导入相关的polyfill,这样就实现了babel-polyfill按需加载。

配置如下:

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

相关文章