当我们使用ES6语法写代码后，我们运行npx webpack打包出来的代码也是ES6语法的，这个时候代码放在一些低版本浏览器(不支持ES6语法)运行是会报错的。
image.png
如果打包后，能把ES6语法转换为ES5语法，就完美的解决了问题，所以我们需要借助Babel来帮我们实现这样的需求
Babel 是一个 JavaScript 编译器，我们该怎么使用呢？步骤如下：
- 进入Babel 官网，我们可以点击
Setup
image.png - 然后
选择使用Babel的场景,比如webpack点击就可以了
image.png - 然后按照提示 首先安装
npm install --save-dev babel-loader @babel/core
`babel-loader`很明显，是帮webpack做打包的工具，`@babel/core`是Babel的核心库，它能让Babel去识别JS代码的里的内容
- 配置 webpack.config.js
image.png
当我们使用babel-loader处理JS文件的时候，实际上这个babel-loader只是webpack和babel做通信的一个桥梁，用了它之后webpack和babel做了打通，但是babel-loader并不会把JS文件里的ES6语法转换为ES5语法,我们还需要借助一些其他的模块，才可以进行转换，比如@babel/preset-env - 安装
@babel/preset-env这个模块里包含了所有 ES6转ES5的翻译规则，只有安装了这个模块，才可以成功的把ES6语法转换为ES5语法
npm install @babel/preset-env --save-dev
-
安装后，我们再添加一个配置
image.png - 然后我们再运行打包命令
npx webpack,我们会发现，有一部分ES6语法已经转成了ES5，但是还是有一些没有转，比如 Promise ，map等 只有ES6才有的语法特性，这些对象或者函数，在低版本浏览器还是不存在的，也就是说我们转换的不彻底。
image.png
- 所以，我们不仅需要用@babel/preset-env做语法的转换，还需要把缺失的变量或者函数，补充到低版本浏览器，怎么补充呢，需要借助
@babel/polyfill把这些缺失的变量或者函数，补充到低版本浏览器
image.png - 安装polyfill
npm install --save @babel/polyfill
- 安装好后，我们只需要在所有代码运行之前，先去引入
import "@babel/polyfill";来补充我们缺失的内容就可以了，位置就是 src目录下index.js的最顶部
image.png
到了这一步，我们就配置完成了，我们先看一下，在我们没有用@babel/polyfill之前，我们打包出的 main.js的体积
image.png
然后，我们重新运行打包
image.png
那这些多的内容是什么呢？就是
@babel/polyfill 要去弥补一些低版本浏览器不存在的一些内容，所以它要自己去帮你去做Promise的实现，map方法的实现，把这些实现再加到 main.js里边，所以main.js就会变得特别大
实际上，这么打包，除了我们用到的promise语法，map语法，还有很多我们没有用到的ES6的语法，它一并给我们打包打main.js里了，但是我们不需要把其他的没用的语法打包到main.js里，而是只需要帮我们我们实现我们用到的promise语法，map语法就可以了，所以我们打包出的main.js的体积是可以再小一些的，那么才能实现呢？ 这个时候就要用到 useBuiltIns按需引入@babel/polyfill，当我们用了 useBuiltIns这个配置，那么index.js最上部，就没有必要再写 import "@babel/polyfill"了，因为 useBuiltIns自己自动帮我们引入@babel/polyfill了
image.png
这样配置的意思是，当我们做@babel/polyfill填充的时候，去往页面上加 一些低版本浏览器可能不存在的特性的时候，不是把所有特性都加进来，而是根据业务代码来决定到底要加什么，比如我们用到的了 promise和map 那就只加这两个。没有用到的就不加。
然后我们再来打包看一下：
image.png
可以看到体积小了很多
当然，我们还可以继续给babel增加一些配置
- 点击官网
Usage Guide
image.png -
我们把它配置到webpack
image.png - 这样配置的意思是，babel在打包的过程中，使用
@babel/preset-env结合@babel/polyfill要去把ES6的语法转换成ES5的语法，这个过程中，是否有必要做ES6到ES5的转换，是否有必要往打包生成的文件里注入promise和map这一类的变量，对象，函数。打包后的项目要运行在列出的这些浏览器上，并且如果浏览器的版本大于等于列出的版本号，它里边对ES6的支持都已经很好了，那么就没有必要再去做ES6到ES5的转换，也没有必要往打包生成的文件里注入promise和map这一类的变量，对象，函数 -
这个时候我们再去打包，发现main.js体积变成了最初的体积
image.png -
而且main.js里完全保留了我们写的ES6语法，因为打包的过程中，发现67以上的谷歌浏览器，完全支持了ES6语法，所以没有必要再去ES6转ES5了
image.png
