×
首页编程语言正文

最近在一些项目编译系统的工作中涉及到了很多关于babel插件的开发，关于babel大多数人的感受可能是既陌生又熟悉，可能大多数人对于babel的应用场景的认识就是在webpack中使用一个babel-loader，但当你真正了解他掌握它的时候，会发现他其实还有些更强的用法。。。

基本概念

babel是什么？

Babel 是一个编译器（输入源码 => 输出编译后的代码）。就像其他编译器一样，编译过程分为三个阶段：解析、转换和打印输出。（官网的解释）。

babel plugin和babel preset是什么？

babel中有很多概念，比如：插件(plugin)，预设(preset)和一些比较基础的工具(例如@babel/parser,@babel/traverse等等)。关于他们的关系，可以理解为babel的plugin构建在基础工具之上，而babel的preset是多个babel plugin的打包集合，例如我们所熟悉的@babel/preset-env,@babel/preset-react。

babel深入

本篇文章不对babel官方的plugin,preset库做过多阐述，毕竟这是一篇深入教程。我们要提的是一个更本质的问题：babel是如何转译代码的？

我们大体上把这个转译代码的过程分为三步：

  • 第一步(parse)：code=>ast
  • 第二步(transform)：ast=>修改过的ast
  • 第三步(generate)：修改过的ast=>编译后的code

这三步分别对应babel的三个基本工具，第一步对应@babel/parser，第二步对应@babel/traverse，第三步对应@babel/generator。下面就来详述一下这三个过程。

parse(@babel/parser)

这一步是babel将code转化为ast。ast是Abstract syntax tree的缩写，即抽象语法树，单说抽象语法树可能不太好理解，我们可以先来看一下一个具体的例子，你可以使用IT虾米网来帮你运行@babel/parser：

function mirror(something) { 
  return something 
}

被转译成ast：

{ 
  "type": "File", 
  "start": 0, 
  "end": 49, 
  "loc": { 
    "start": { 
      "line": 1, 
      "column": 0 
    }, 
    "end": { 
      "line": 3, 
      "column": 1 
    } 
  }, 
  "program": { 
    "type": "Program", 
    "start": 0, 
    "end": 49, 
    "loc": { 
      "start": { 
        "line": 1, 
        "column": 0 
      }, 
      "end": { 
        "line": 3, 
        "column": 1 
      } 
    }, 
    "sourceType": "module", 
    "interpreter": null, 
    "body": [ 
      { 
        "type": "FunctionDeclaration", 
        "start": 0, 
        "end": 49, 
        "loc": { 
          "start": { 
            "line": 1, 
            "column": 0 
          }, 
          "end": { 
            "line": 3, 
            "column": 1 
          } 
        }, 
        "id": { 
          "type": "Identifier", 
          "start": 9, 
          "end": 15, 
          "loc": { 
            "start": { 
              "line": 1, 
              "column": 9 
            }, 
            "end": { 
              "line": 1, 
              "column": 15 
            }, 
            "identifierName": "mirror" 
          }, 
          "name": "mirror" 
        }, 
        "generator": false, 
        "async": false, 
        "params": [ 
          { 
            "type": "Identifier", 
            "start": 16, 
            "end": 25, 
            "loc": { 
              "start": { 
                "line": 1, 
                "column": 16 
              }, 
              "end": { 
                "line": 1, 
                "column": 25 
              }, 
              "identifierName": "something" 
            }, 
            "name": "something" 
          } 
        ], 
        "body": { 
          "type": "BlockStatement", 
          "start": 27, 
          "end": 49, 
          "loc": { 
            "start": { 
              "line": 1, 
              "column": 27 
            }, 
            "end": { 
              "line": 3, 
              "column": 1 
            } 
          }, 
          "body": [ 
            { 
              "type": "ReturnStatement", 
              "start": 31, 
              "end": 47, 
              "loc": { 
                "start": { 
                  "line": 2, 
                  "column": 2 
                }, 
                "end": { 
                  "line": 2, 
                  "column": 18 
                } 
              }, 
              "argument": { 
                "type": "Identifier", 
                "start": 38, 
                "end": 47, 
                "loc": { 
                  "start": { 
                    "line": 2, 
                    "column": 9 
                  }, 
                  "end": { 
                    "line": 2, 
                    "column": 18 
                  }, 
                  "identifierName": "something" 
                }, 
                "name": "something" 
              } 
            } 
          ], 
          "directives": [] 
        } 
      } 
    ], 
    "directives": [] 
  }, 
  "comments": [] 
}

乍一看似乎很复杂，但是你要做的是从中找到关键信息，我们将当中影响阅读的字段去除（去除loc,start,end,以及函数体外层的嵌套）：

{ 
  "type": "FunctionDeclaration", 
  "id": { 
    "type": "Identifier", 
    "name": "mirror" 
  }, 
  "generator": false, 
  "async": false, 
  "params": [ 
    { 
      "type": "Identifier", 
      "name": "something" 
    } 
  ], 
  "body": { 
    "type": "BlockStatement", 
    "body": [ 
      { 
        "type": "ReturnStatement", 
        "argument": { 
          "type": "Identifier", 
          "name": "something" 
        } 
      } 
    ], 
    "directives": [] 
  } 
}

这样是不是简单很多！我们看一下这个json描述了什么：外层是一个叫mirror的函数声明，他的传参有一个，叫something，函数体内部return了一个叫something的变量。我们把这个描述与上边的js代码对照着看，竟然不谋而合（其实从这一点也能看出code<=>ast这个过程是可逆的）。对于初学者而言，上边的抽象语法树难以理解的可能是这些名字冗长的节点type，下边简单列举一下js中的常见的节点名称（慎看，可以选择性跳过，但是了解这些节点名称可以加深你对babel甚至js语言本身的理解）。详见IT虾米网

FunctionDeclaration（函数声明） 
 
function a() {} 
 
FunctionExpression（函数表达式） 
 
var a = function() {} 
 
ArrowFunctionExpression（箭头函数表达式） 
 
()=>{}(此处可以思考：为什么没有箭头函数声明，以及Declaration和Expression的区别) 
 
AwaitExpression（await表达式） 
 
async function a () { await b() } 
 
CallExpression（调用表达式） 
 
a() 
 
MemberExpression（成员表达式） 
 
a.b 
 
VariableDeclarator（变量声明） 
 
var,const,let(var,const,let用Node中的kind区分) 
 
Identifier（变量标识符） 
 
var a(这里a是一个Identifier) 
 
NumericLiteral（数字字面量） 
 
var a = 1 
 
StringLiteral（字符串字面量） 
 
var a = 'a' 
 
BooleanLiteral（布尔值字面量） 
 
var a = true 
 
NullLiteral（null字面量） 
 
var a = null(此处可以思考：为什么没有undefined字面量) 
 
BlockStatement（块） 
 
{} 
 
ArrayExpression（数组表达式） 
 
[] 
 
ObjectExpression（对象表达式） 
 
var a = {} 
 
SpreadElement（扩展运算符） 
 
{...a},[...a] 
 
ObjectProperty（对象属性） 
 
{a:1}(这里的a:1是一个ObjectProperty) 
 
ObjectMethod（函数属性） 
 
{a(){}} 
 
ExpressionStatement（表达式语句） 
 
a() 
 
IfStatement（if） 
 
if () {} 
 
ForStatement（for） 
 
for (;;){} 
 
ForInStatement（for in） 
 
for (a in b) {} 
 
ForOfStatement（for of） 
 
for (a of b) {} 
 
ImportDeclaration（import声明） 
 
import 'a' 
 
ImportDefaultSpecifier（import default说明符） 
 
import a from 'a' 
 
ImportSpecifier（import说明符） 
 
import {a} from 'a' 
 
NewExpression（new表达式） 
 
new A() 
 
ClassDeclaration（class声明） 
 
class A {} 
 
ClassBody（class body） 
 
class A {}(类的内部)

常见的列举的差不多了。。。就先写到这吧。

generate(@babel/generator)

generate本来应该是第三步，为什么将第三步放到这里呢？因为他比较简单，而且当我们使用traverse时，需要用到它。在这里我们简单的把一段code转换为ast，再转换为code：

先安装好依赖。这一点以后不再赘述

yarn add @babel/parser @babel/generator 
const parser = require('@babel/parser') 
const generate = require('@babel/generator').default 
 
const code = `function mirror(something) { 
  return something 
}` 
const ast = parser.parse(code, { 
  sourceType: 'module', 
}) 
const transformedCode = generate(ast).code 
console.log(transformedCode)
  • 结果：
function mirror(something) { 
  return something; 
}

这就是generator的基本用法，详细参照IT虾米网

transform(@babel/traverse,@babel/types,@babel/template)

到了最为关键的transform步骤了，这里的主角是@babel/traverse，@babel/types和@babel/template是辅助工具。我们首先来谈一下visitor这个概念。

visitor

  1. visitor是什么
访问者是一个用于 AST 遍历的跨语言的模式。 简单的说它们就是一个对象，定义了用于在一个树状结构中获取具体节点的方法。

假如你这样写了一个visitor传递给babel:

const visitor = { 
  Identifier () { 
    enter () { 
      console.log('Hello Identifier!') 
    }, 
    exit () { 
      console.log('Bye Identifier!') 
    } 
  } 
}

那么babel会使用他的递归遍历器去遍历整棵ast，在进入和退出Identifier节点时，会执行我们定义的函数。

2.在一般情况下exit较少使用，所以可以简写成：

const visitor = { 
  Identifier () { 
    console.log('Hello Identifier!') 
  } 
}

3.如有必要，你还可以把方法名用|分割成a节点类型|b节点类型形式的字符串，把同一个函数应用到多种访问节点。

const visitor = { 
  'FunctionExpression|ArrowFunctionExpression' () { 
    console.log('A function expression or a arrow function expression!') 
  } 
}

好了，现在以上边的mirror函数为例，来动手写一个traverse的简单示例吧：

const parser = require('@babel/parser') 
const traverse = require('@babel/traverse').default 
 
const code = `function mirror(something) { 
  return something 
}` 
const ast = parser.parse(code, { 
  sourceType: 'module', 
}) 
const visitor = { 
  Identifier (path) { 
    console.log(path.node.name) 
  } 
} 
traverse(ast, visitor)
  • 结果：mirror,something,something

与你的预估是否一致呢？如果一致，那我们可以继续往下。此处你可能提出疑问：这个path是什么？

path

可以简单地认为path是对当前访问的node的一层包装。例如使用path.node可以访问到当前的节点，使用path.parent可以访问到父节点，这里列出了path所包含的内容（尚未列出path中所包含的一些方法）。

{ 
  "parent": {...}, 
  "node": {...}, 
  "hub": {...}, 
  "contexts": [], 
  "data": {}, 
  "shouldSkip": false, 
  "shouldStop": false, 
  "removed": false, 
  "state": null, 
  "opts": null, 
  "skipKeys": null, 
  "parentPath": null, 
  "context": null, 
  "container": null, 
  "listKey": null, 
  "inList": false, 
  "parentKey": null, 
  "key": null, 
  "scope": null, 
  "type": null, 
  "typeAnnotation": null 
}
当你有一个 Identifier() 成员方法的访问者时，你实际上是在访问路径而非节点。 通过这种方式，你操作的就是节点的响应式表示（译注：即路径）而非节点本身。 babel handbook

path中还提供了一系列的工具函数，例如traverse(在当前path下执行递归),remove(删除当前节点),replaceWith(替换当前节点)等等。

解释完了path之后，我们试着真正的来转换一下代码吧，在这里使用了@babel/generator来将ast转换为code

const parser = require('@babel/parser') 
const traverse = require('@babel/traverse').default 
const generate = require('@babel/generator').default 
 
const code = `function mirror(something) { 
  return something 
}` 
const ast = parser.parse(code, { 
  sourceType: 'module', 
}) 
const visitor = { 
  Identifier (path) { 
    path.node.name = path.node.name.split('').reverse().join('') 
  } 
} 
traverse(ast, visitor) 
const transformedCode = generate(ast).code 
console.log(transformedCode)
  • 结果：
function rorrim(gnihtemos) { 
  return gnihtemos; 
}

这段代码应该不难理解，就是将所有的变量做了个字符串翻转。是不是事情已经变得有趣起来了？

@babel/types

Babel Types模块是一个用于 AST 节点的 Lodash 式工具库（译注：Lodash 是一个 JavaScript 函数工具库，提供了基于函数式编程风格的众多工具函数）， 它包含了构造、验证以及变换 AST 节点的方法。 该工具库包含考虑周到的工具方法，对编写处理AST逻辑非常有用。（依然是handbook原话）

展示一下最常用的使用方式，用来判断节点的类型

const parser = require('@babel/parser') 
const traverse = require('@babel/traverse').default 
const t = require('@babel/types') 
 
const code = `function mirror(something) { 
  return something 
}` 
const ast = parser.parse(code, { 
  sourceType: 'module', 
}) 
const visitor = { 
  enter(path) { 
    if (t.isIdentifier(path.node)) { 
      console.log('Identifier!') 
    } 
  } 
} 
traverse(ast, visitor)
  • 结果：Identifier! Identifier! Identifier!

@babel/types还可以用来生成节点，结合上边的知识，我们试着改动mirror函数的返回值

const parser = require('@babel/parser') 
const traverse = require('@babel/traverse').default 
const generate = require('@babel/generator').default 
const t = require('@babel/types') 
 
const code = `function mirror(something) { 
  return something 
}` 
const ast = parser.parse(code, { 
  sourceType: 'module', 
}) 
const strNode = t.stringLiteral('mirror') 
const visitor = { 
  ReturnStatement (path) { 
    path.traverse({ 
      Identifier(cpath){ 
        cpath.replaceWith(strNode) 
      } 
    }) 
  } 
} 
traverse(ast, visitor) 
const transformedCode = generate(ast).code 
console.log(transformedCode)
  • 结果：
function mirror(something) { 
  return "mirror"; 
}

在这里我们用到了t.stringLiteral('mirror')去创建一个字符串字面量节点，然后递归遍历ReturnStatement下的Identifier，并将其替换成我们所创建的字符串字面量节点(注意此处我们已经开始使用了一些path下的公共方法)。

@babel/template

使用@babel/type创建一些简单节点会很容易，但是如果是大段代码的话就会变得困难了，这个时候我们可以使用@babel/template。下面写了一个简单示例，为mirror函数内部写了一些逻辑判断。

const parser = require('@babel/parser') 
const traverse = require('@babel/traverse').default 
const generate = require('@babel/generator').default 
const template = require('@babel/template').default 
const t = require('@babel/types') 
 
const code = `function mirror(something) { 
  return something 
}` 
const ast = parser.parse(code, { 
  sourceType: 'module', 
}) 
const visitor = { 
  FunctionDeclaration(path) { 
    // 在这里声明了一个模板，比用@babel/types去生成方便很多 
    const temp = template(` 
      if(something) { 
        NORMAL_RETURN 
      } else { 
        return 'nothing' 
      } 
    `) 
    const returnNode = path.node.body.body[0] 
    const tempAst = temp({ 
      NORMAL_RETURN: returnNode 
    }) 
    path.node.body.body[0] = tempAst 
  } 
} 
traverse(ast, visitor) 
const transformedCode = generate(ast).code 
console.log(transformedCode)
  • 结果:
function mirror(something) { 
  if (something) { 
    return something; 
  } else { 
    return 'nothing'; 
  } 
}

完美！以上，babel基本的工具使用方式就介绍的差不多了，下边步入正题：尝试写一个babel插件。

写一个babel插件

其实到这里，编写一个babel插件已经非常简单了，我们尝试直接将上边的代码移植成为一个babel插件

module.exports = function (babel) { 
  const { 
    types: t, 
    template 
  } = babel 
  const visitor = { 
    FunctionDeclaration(path) { 
      const temp = template(` 
        if(something) { 
          NORMAL_RETURN 
        } else { 
          return 'nothing' 
        } 
      `) 
      const returnNode = path.node.body.body[0] 
      const tempAst = temp({ 
        NORMAL_RETURN: returnNode 
      }) 
      path.node.body.body[0] = tempAst 
    } 
  } 
  return { 
    name: 'my-plugin', 
    visitor 
  } 
}

babel插件暴露了一个函数，函数的传参是babel，你可以使用解构赋值获取到types,template这些工具。函数返回值中包含一个name和一个visitor，name是插件的名称，visitor就是我们上边多次编写的visitor。

你可能注意到了一些babel插件是可以传参的，那我们如何在babel插件中接收参数呢

module.exports = function (babel) { 
  const { 
    types: t, 
    template 
  } = babel 
  const visitor = { 
    FunctionDeclaration(path, state) { 
      const temp = template(` 
        if(something) { 
          NORMAL_RETURN 
        } else { 
          return '${state.opts.whenFalsy}' 
        } 
      `) 
      const returnNode = path.node.body.body[0] 
      const tempAst = temp({ 
        NORMAL_RETURN: returnNode 
      }) 
      path.node.body.body[0] = tempAst 
    } 
  } 
  return { 
    name: 'my-plugin', 
    visitor 
  } 
}

在上边的例子中我们看到在visitor中可以传入第二个参数state，在这个state中，使用state.opts[配置名]就可访问到用户所传递的对应配置名的值

如何测试你所编写的babel插件是可以使用的呢？引用你所编写的插件并测试一下：

const babel = require("@babel/core") 
 
const code = `function mirror(something) { 
  return something 
}` 
const res = babel.transformSync(code, { 
  plugins: [ 
    [require('你编写的插件地址'), { 
      whenFalsy: 'Nothing really.' 
    }] 
  ] 
}) 
 
console.log(res.code)
  • 结果：
function mirror(something) { 
  if (something) { 
    return something; 
  } else { 
    return 'Nothing really.'; 
  } 
}

以上，我们基本对babel的原理有了一个基本的认识，并且可以自己写出一个babel插件了。至于如何将babel的威力发挥在日常的工作中呢？就需要各位去自行探索了。

 


评论关闭
IT序号网
IT序号网 JavaScript 编程语言

微信公众号号：IT虾米 （左侧二维码扫一扫）欢迎添加！