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内部做好了封装，我们可以不用理解