BABEL
ES6语法在部分浏览器上，并不支持，而开发人员心里想着尝鲜ES6，鱼与熊掌无法兼得。
面对选择：要ES6还是要浏览器支持，成年人表示2个都要。
这就需要找到一个可以转ES6为ES5的方法，这就是我们今天了解的主角-BABEL。
BABEL是一种JAVASCRIPT的编译器，能够把输入的代码转成另外一套输入的代码。
其实做ES6转为ES5 只是其中一个应用场景，只要涉及到代码转化的，都可以用到BABEL
BABEL转化过程
BABEL转化的步骤，简单说就三步
-
代码转为AST树
AST树类似JS对象，通过对象方式来表达代码结构，方便第二步的修改。
function square(n) {
return n * n;
}
上面 这段代码就被转化为如下的AST树
AST树中每一层结构称之为节点，每个节点都有type声明节点类型
如上图，我们看到有FunctionDeclaration,BlockStatement,ReturnStatement,Identifiersi 等4种节点类型
我们可以通过 https://astexplorer.net/ 来对 AST 节点有一个更好的感性认识
我们可以通过 https://github.com/babel/babel/tree/master/packages/babel-types/src/definitions 来了解节点类型对应的属性
-
AST树修改
修改AST树的，BABEL本身不做处理，而是交付给众多的插件来做处理，BABEL本身只做插件调用
代码转化需求千奇百怪，BABEL本身肯定无法覆盖，通过调用插件的方式比较合理，这就类似微信只做平台，服务是靠接入类似
BABEL提供了很多官方插件，当然它也提供对应API可以自定义插件开发
如：
@babel/plugin-transform-arrow-functions 来做箭头函数的转化
@babel/plugin-transform-parameters 来做参数解构
@babel/plugin-transform-spread 来处理扩展预算符
我们使用配置文件的话，如下：
{
plugins:[
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-parameters",
"@babel/plugin-transform-spread"
]
}
插件的开发是基于节点访问，类似事件回调开发，下次再发文详细说下插件开发
我们上述使用了3个ES6功能，就要使用3个插件，如果过程中用了其他ES6语法，我们又没有在配置文件添加对应的语法，这就没有完成对应的转化，而且在配置文件里要写一大堆的插件也是麻烦，有没有其他便捷的办法呢？
答案是有的，这就是Preset预设。
预设可以理解为一系列插件的集合，引入一个预设，就相当于引入一系列的插件。
我们经常使用的就是@babel/preset-env
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
},
"useBuiltIns": "usage",
"corejs": "3.6.5",
}
]
]
}
简单的预设开发如下
- AST树转代码
这是第一步的逆向步骤，BABEL内部做好了封装，我们可以不用理解
