js 关系图插件_babel插件的相关知识

一、babel介绍

Babel 是 JavaScript 编译器，更确切地说是源码到源码的编译器，通常也叫做“转换编译器（transpiler）”。 意思是说你为 Babel 提供一些 JavaScript 代码，Babel 更改这些代码，然后返回给你新生成的代码。在这个源码到源码的转换过程当中，抽象语法树，即AST，起到了重要的作用。

二、抽象语法树（AST）

抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，一种编程语言的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。和我们的常说的虚拟DOM有点像，虚拟dom是用json的格式把DOM结构抽象成js对象，用于描述DOM的结构，每个节点的类型、属性等等，类似的AST是把js的源代码抽象为js对象的格式，以方便描述这段代码的语法。程序代码本身被映射成为一棵语法树，通过操纵语法树，我们能够精准的获得程序代码中的每一个精确的节点。例如声明语句，赋值语句等。

三、babel的处理步骤

Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。

解析步骤接收代码并输出 AST

转换步骤接收 AST 并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作。 这是 Babel 或是其他编译器中最复杂的过程，同时也是插件将要介入工作的部分。在babel-loader中有两种方式可以配置babel插件，我们经常会配置：

rules: [
  {
    test: /.(js|jsx)$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    options: {
      presets: ["env", 'stage-0'],
      plugins: [
        ["extract", { "library": "lodash" }],
        ["transform-runtime", {}]
      ]
    },
  }
]

注意：plugins 的插件使用顺序是顺序的，而 preset 则是逆序的。所以上面的执行方式是extract>transform-runtime>stage-0>env

代码生成