前言

近期生病了，所以就没有及时的更新文章，现在情况好转了，陆续进行更新。。。

polyfill是什么？

Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。

在 webpack4 polyfill 默认就存在的，为了保证运行时效和体积大小，webpack5 中移除了 polyfill，需要自行安装。

什么时候使用？

当你使用 babel 对较新的 js 语法进行转换无效时，就可以使用它。

polyfill配置

项目结构

在 JS 文件夹下面创建 polyfill.js,并使用最基础的 Promise 语法

const fn = new Promise((resolve,reject) => {
    console.log('Promise');
})

fn()

对项目进行打包 npm run build ,查看 dist 文件夹下，如下：

不利于代码的查看，在 webpack.config 中设置 devtool:false

在重新打包项目，这里时候代码就变得直观起来了。

插件安装

基本的准备工作完成，我们来到 babel 官网，找到 @babel/polyfill ，这里有详细的说明。

🚨 从 Babel 7.4.0 开始，这个包已被弃用，取而代之的是直接包含core-js/stable（填充 ECMAScript 特性）
因此，没有必要直接安装 polyfill ，会有不必要的模块包影响体积。

提供 polyfill 是为了方便，但您应该将它与@babel/preset-env 选项 useBuiltIns一起使用，这样它就不会包含并不总是需要的整个 polyfill。

这里安装：
npm install core-js -S
npm install @babel/preset-env -S

插件配置及说明

babel.config.js 中使用配置。

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

这里对配置进行说明：

false，不启用 polyfill，不进行处理
usage：不需要手动 import "core-js/stable";，会根据 browserlist + 业务代码使用到的新 API 按需自动加上 polyfill
entry：需要手动 import "core-js/stable";，根据 browserlist 中浏览器版本的支持，将 polyfill 拆分引入浏览器不支持的 polyfill。这样会导致实际用不到的 polyfill 也会被打包到输出文件，导致文件比较大。
corejs:3 为使用版本。

第三种 entry 方式，需要在你的 JS 文件中引入 import "core-js/stable";

总结

以上就是 polyfill 的使用，处理 JS 代码，把一些新的语法，让浏览器能够识别并运用，高级语言转换成低级语言。有什么不对的地方请指正！

polyfill的使用与设置

前言

polyfill是什么？

什么时候使用？

polyfill配置

插件安装

插件配置及说明

总结