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树
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",
}
]
]
}
简单的预设开发如下
image.png
- AST树转代码
这是第一步的逆向步骤,BABEL内部做好了封装,我们可以不用理解
网友评论