1、Babel 是一个工具链，主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码：
转换语法
Polyfill 实现目标环境中缺少的功能 (通过 @babel/polyfill)
源代码转换 (codemods)
2、@babel/core：
@babel/core是babel的核心库，所有的核心Api都在这个库里，这些Api供babel-loader调用
3、@babel/preset-env：
这是一个预设的插件集合，包含了一组相关的插件，Bable中是通过各种插件来指导如何进行代码转换。该插件包含所有es6转化为es5的翻译规则
4、@babel/polyfill：
@babel/preset-env只是提供了语法转换的规则，但是它并不能弥补浏览器缺失的一些新的功能，如一些内置的方法和对象，如Promise,Array.from等，此时就需要polyfill来做js得垫片，弥补低版本浏览器缺失的这些新功能。
安装babel-loader
```sh
npm i babel-loader -D
```
然后我们需要安装babel的核心库@babel/core,@babel/preset-env,core-js
```sh
npm i @babel/core -D
npm i @babel/preset-env -D
npm i core-js -s
```
这一步操作完毕之后我们还需要在项目中创建babel的核心配置文件
.babelrc文件
```json
{
"presets":[
[
"@babel/preset-env", //应用@babel/preset-env解析js
{
"useBuiltIns": "usage", //使用动态解析语法，根据兼容性转义
"corejs":3//使用core-js3版本的js库来对低版本浏览器做兼容
}
]
]
}
然后我们需要定义该项目可以兼容浏览器的范围
创建.browserslistrc文件（webpack5版本配置browserslist之后会造成热更新失效的问题，有待官方解决）
```sh
> 0.25%
last 2 versions
```
定义完成之后我们可以通过
```sh
npx browserslist
```
来查看当前项目可兼容浏览器的列表
browserlist配置说明
| 例子 | 说明 |
| :------------------------- | :------------------------------------------------------ |
| > 1% | 全球超过1%人使用的浏览器 |
| > 5% in US | 指定国家使用率覆盖 |
| last 2 versions | 所有浏览器兼容到最后两个版本根据 CanIUse.com 追踪的版本 |
| Firefox ESR | 火狐最新版本 |
| Firefox > 20 | 指定浏览器的版本范围 |
| not ie <=8 | 方向排除部分版本 |
| Firefox 12.1 | 指定浏览器的兼容到指定版本 |
| unreleased versions | 所有浏览器的beta测试版本 |
| unreleased Chrome versions | 指定浏览器的测试版本 |
| since 2013 | 2013年之后发布的所有版本 |
完成之后我们可以在index.js中定义一些es6的map循环，Promise等来测试构建是否被转译
网友评论