1.概念babel类似编译器，让web应用能够运行旧版本的浏览器，比如把ES6语法转译成ES5等
2.原理
解析->转换->输出
3.如何开发babel插件
借助底层插件
@babel/parser： babel解析器将源代码code解析成 AST
@babel/generator: 将AST解码生成js代码 new Code
@babel/traverse : 用来遍历AST树，可以用来改造AST～，如替换或添加AST原始节点
@babel/core：包括了整个babel工作流
babel在线转义，可以在线将ES6代码转为ES5代码。转换后的代码，可以直接作为ES5代码插入网页运行 babeljs.io/repl/#?brow…
ES7不同阶段语法转码规则：
stage-0是对ES7一些提案的支持，Babel通过插件的方式引入，让Babel可以编译ES7代码 stage-0: 包含stage-1, stage-2以及stage-3的所有功能，同时还另外支持如下两个功能插件：
transform-do-expressions
transform-function-bind
stage-1：包含stage-2和stage-3，还包含了下面4个插件：
transform-class-constructor-call (Deprecated)
transform-class-properties
transform-decorators – disabled pending proposal update
transform-export-extensions
stage-2：覆盖stage-3的所有功能，新增"尾逗号函数”功能
// 有一天，它需要变成3个参数，你需要这样修改
function clownPuppiesEverywhere(
param1,
- param2
+ param2, // 这一行得加一个逗号
+ param3 // 增加参数param3
) { /* ... */ }
// 尾逗号函数
function clownPuppiesEverywhere(
param1,
param2, // 注意这里，我们加了一个逗号哟
) { /* ... */ }
stage-3：
用同步的思维来写 async和await，ES7里面非常强悍的存在。它包含如下两个插件:
transform-async-to-generator ：主要用来支持ES7中的async和await
transform-exponentiation-operator
4.@babel/preset-env配置优化 @babel/preset-env 中与 @babel/polyfill 的相关参数有两个如下：
targets: 支持的目标浏览器的列表 useBuiltIns: 参数有 “entry”、”usage”、false 三个值。默认值是false，此参数决定了babel打包时如何处理@babel/polyfilll 语句
关于useBuiltIns的不同配置如下：
entry: 去掉目标浏览器已支持的polyfilll 模块，将浏览器不支持的都引入对应的polyfilll 模块。
usage: 打包时会自动根据实际代码的使用情况，结合 targets 引入代码里实际用到部分 polyfilll模块
false: 不会自动引入 polyfilll 模块，对polyfilll模块屏蔽
建议：使用 useBuiltIns: usage 来根据目标浏览器的支持情况，按需引入用到的 polyfill 文件，这样打包体积也不会过大
5.webpack打包如何使用babel
利用babel-loader 插件， babel-loader 相当于中间件，通过调用babel/core中的API来告知webpack要如何处理。
