一、babel

1.1 概念

:::info

  1. 将ES6的代码转化为es5代码，让浏览器可以支持

  2. babel 只会解析 js 语法，具体的语法实现还需通过preset 和 plugins 实现 :::

    1.2 安装

    （1）根据文档的webpack构建教程
    npm i babel-loader @babel/core -D
    image.png
    （2）安装npm i @babel/preset-env -D
    :::info @babel/preset-env babel的预设，集成了 es6 -> es5 实现的库 ::: 这个库知道：将 let、const、var等es6的语法转化为es5的语法
    （3）安装npm i @babel/polyfill -D
    将所有es6新特性的函数：promise、then、map、reduce等； 用es5方法重写的函数库

    1.3 配置解释

  3. babel-loader:

不能翻译js代码；作用：是webpack和Babel之间通信的桥梁

  1. exclude: /node_modules/:

不去翻译node_module文件夹下的js代码

image.png

1.4 @babel/polyfill:

1.4.1 全局引入polyfill：

**import '@babel/polyfill'**
将所有es6新特性的函数用es5方法重写的函数库，import '@babel/polyfill'表示将库中所有的代码都进行引入

image.png
使用：在js代码中import '@babel/polyfill'
image.png
使用polyfill翻译es6新特性的代码：增加代码打包的体积
image.png

1.4.2 按需配置使用polyfill：

polyfill 按需使用方法重写:::info 按需引入：

  1. import ‘@babel/polyfill’ 引入所有es6 方法的重写，体积过大
  2. 在 preset 配置 useBuiltIns：'usage' 按需引入 @babel/polyfill 中方法重写

  3. 源代码用到那个方法函数，从polyfill 中引入对应的方法 :::

    useBuiltIns: 'usage'

    :::info 通过如下配置：告诉polyfill遇到代码中的es6特性的代码，按需引入重写的函数，而不是一次引入所有的函数 ::: **webpack.config.js**中配置
    image.png
    .babelrc//babel.config.json 中配置
    image.png

    1. {
    2. "presets": [
    3. [
    4. // 预设，包含es6+代码转为es5-代码插件集合
    5. "@babel/preset-env",
    6. // 配置
    7. {
    8.   "targets": {
    9.     "edge": "17",
    10.     "firefox": "60",
    11.     "chrome": "67",
    12.     "safari": "11.1"
    13.   },
    14.   // 设置按需引入
    15.   "useBuiltIns": "usage",
    16.   // 使用的core-js的版本号
    17.   "corejs": "3"
    18. }
    19. ]
    20. ],
    21. "plugins": []
    22. }

    image.png :::info **core-js**文件中

  4. 不同的 .js 文件 对应不同的 es6 新特性方法的实现，

  5. 因此可以通过 按需引入的方式，进行实现 ::: image.png
    image.png
    image.png

    二、babel进一步理解

    2.1 按需引入报错问题

    报警告问题：
    此时的意思是删除 全部引入import '@babel.poyfill'
    image.png
    解决报警告：（1）设置corejs版本号 （2）删除 全局引入 polyfill 原因：插件会自动按需引入
    image.pngimage.png

    2.2 polyfill的本质

    @babel/polyfill
  1. 实现了库corejs + regenerator，将这两个库整合，库：将es6新特性的代码，通过es5的方法进行实现

    2.2.1 配置了polyfill的按需引入

    （1）需要安装npm i core-js -D 解决 如下报错问题：
    image.pngimage.png
    （2）报错：删除import '@babel/polyfill' 无法找到core-js这个库了，需要手动配置引入
    image.png

2.3 解决全局污染的情况

2.3.1 解决思想：

通过transform-runtime在corejs对es6新特性进行编译时，将全局的promise、map实现的变量名称改变、
例如：源代码new Promise -> new Promise + 改变名称
源代码new map -> new map1
image.png

2.3.2 如何使用：

  1. 开发环境下：npm i @babel/plugin-transform-runtime -D
  2. 生产环境下：npm i @babel/runtime -S

image.png

  1. 配置：防止第三方 命名污染全局环境

image.png
防止二者的@babel/poyfill冲突；因为transform-runtime会提供另一种版本的@babel/poyfill。。。
image.png
image.png

2.4 单独创建Babel 的配置文件

创建一个.babelrcBabel 专属的配置文件
image.png
image.png

三、插件介绍

3.1 core-js

是一个库，本质上通过es5的方法实现了所有es6方法函数的新特性，以便低版本浏览器能够兼容
但是：core-js 没有实现 es6 的 generator方法的特性；因此：需要搭配regenerator来，完整配合

3.2 regenerator

通过 es5 方法实现了 es6 的 generator的新特性

3.3 @babel/polyfill

将 core-js库 和 regenerator 库 进行了整合；

3.3.1 污染全局环境：

@babel/polyfill 实现es6新特性的方法时会污染全局环境
image.png
见上：解决 全局环境的污染问题