babel-loader - polyfill - 《前端进阶学习》

polyfill是什么呢？
什么时候会用到polyfill？
如何使用polyfill？
- 1）以前
- 2）现在

polyfill是什么呢？

翻译：一种用于衣物、床具等的聚酯填充材料, 使这些物品更加温暖舒适；
理解：更像是应该填充物（垫片），一个补丁，可以帮助我们更好的使用JavaScript；

什么时候会用到polyfill？

比如我们使用了一些语法特性（例如：Promise, Generator, Symbol等以及实例方法例如
Array.prototype.includes等）。但是某些浏览器压根不认识这些特性，必然会报错；我们可以使用polyfill来填充或者说打一个补丁，那么就会包含该特性了。

如何使用polyfill？

1）以前

在babel7.4.0之前，可以使用 @babel/polyfill的包，但是该包现在已经不推荐使用了。

2）现在

① 安装

在babel7.4.0之后，可以通过单独引入core-js和 regenerator-runtime 来完成polyfill的使用。
npm i -s core-js regenerator-runtime

② 配置webpack.config.js

注意！！！在webpack.configf.js中排除node_modules的文件。因为很多第三方包内部已经实现了polyfill了，会引起冲突。

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  }
}

③ 配置babel.config.js

我们需要在babel.config.js文件中进行配置，给preset-env配置一些属性：

useBuiltIns：设置以什么样的方式来使用polyfill；
corejs：设置corejs的版本，目前使用较多的是3.x的版本，比如我使用的是3.8.x的版本；另外corejs可以设置是否对提议阶段的特性进行支持；设置proposals属性为true即可。

a.useBuiltIns属性值

false

打包后的文件不使用polyfill来进行适配；且这个时候是不需要设置corejs属性的。

usage

会根据源代码中出现的语言特性，自动检测所需要的polyfill；这样可以确保最终包里的polyfill数量的最小化，打包的包相对会小一些；这是可以设置corejs属性来确定使用的corejs的版本。

module.exports = {
presets: [
  ['@babel/preset-env', {
    useBuiltIns: 'usage',
    corejs: 3 // 默认值2版本，我们安装的是3
  }]
]
}

entry

如果我们**依赖的某一个库**本身使用了某些polyfill的特性，但是因为我们使用的是**usage**，所以之后用户浏览器可能会**报错**。所以，如果你担心出现这种情况，可以使用entry；<br />       并且需要在入口文件中添加： `import 'core-js/stable'; import 'regenerator-runtime/runtime';这样做会根据browerslist目标导入所有的polyfill，但是对应的包也会变大。

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

import 'core-js/stable'; 
import 'regenerator-runtime/runtime'
new Promise (resolve => {
resolve(2)
})

polyfill