微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

理解 Babel 插件

2016-10-14 20:29 前端大全

(点击上方公众号,可快速关注)


作者:淘宝前端团队(FED)- 波本 

链接:taobaofed.org/blog/2016/09/29/babel-plugins/


前言


相信目前常与 ES6 代码打交道的同学对 Babel 应该不会陌生,在 ES6 代码被编译转化为 ES5 代码的过程中,Babel 插件显得尤为重要,我们最后经由 Babel 生成的代码取决于插件在这一层中做了什么事,在探索这其中的过程之前,我们先来了解下一些所需的基础知识。


抽象语法树


Babel 的工作流可以用下面一张图来表示,代码首先经由 babylon 解析成抽象语法树(AST),后经一些遍历和分析转换(主要过程),最后根据转换后的 AST 生成新的常规代码。



在这其中,理解清楚 AST 十分重要,我们之所以需要将代码转换为 AST 也是为了让计算机能够更好地进行理解。我们可以来看看下面这段代码被解析成 AST 后对应的结构图:


function abs(number) {

  if (number >= 0) {  // test

    return number;  // consequent

  } else {

    return -number; // alternate

  }

}



所有的 AST 根节点都是 Program 节点,从上图中我们可以看到解析生成的 AST 的结构的各个 Node 节点都很细微,Babylon AST 有个文档对每个节点类型都做了详细的说明,你可以对照各个节点类型在这查找到所需要的信息。在这个例子中,我们主要关注函数声明里的内容, IfStatement 对应代码中的 if...else 区块的内容,我们先对条件(test)进行判断,这里是个简单的二进制表达式,我们的分支也会从这个条件继续进行下去,consequent 代表条件值为 true 的分支,alternate 代表条件值为 false 的分支,最后两条分支各自在 ReturnStatement 节点进行返回。


了解 AST 各个节点的类型是后续编写插件的关紧,AST 通常情况下都是比较复杂的,上述一段简单的函数定义也生成了比较大的 AST,对于一些复杂的程序,我们可以借助astexplorer 来帮我们分析 AST 的结构。


遍历节点


在插件里进行节点遍历需要先了解 visitor 和 path 的概念,前者相当于从众多节点类型中选择开发者所需要的节点,后者相当于对节点之间的关系的访问。


visitor


Babel 使用 babel-traverse 进行树状的遍历,对于 AST 树上的每一个分支我们都会先向下遍历走到尽头,然后向上遍历退出遍历过的节点寻找下一个分支。Babel 提供我们一个visitor 对象供我们获取 AST 里所需的具体节点来进行访问,比如我只想访问 if...else 生成的节点,我们可以在 visitor 里指定获取它所对应的节点:


const visitor = {

  IfStatement() {

    console.log('get if');

  }

};


继续上述所说的遍历,其实这种遍历会让每个节点都会被访问两次,一次是向下遍历代表进入(enter),一次是向上退出(exit)。因此实际上每个节点都会有 enter 和 exit 方法,在实际操作的时候需要注意这种遍历方式可能会引起的一些问题,上述例子是省略掉enter 的简写。


const visitor = {

  IfStatement: {

    enter() {},

    exit() {}

  }

}


path


visitor 模式中我们对节点的访问实际上是对节点路径的访问,在这个模式中我们一般把path 当作参数传入节点选择器中。path 表示两个节点之间的连接,通过这个对象我们可以访问到节点、父节点以及进行一系列跟节点操作相关的方法(类似 DOM 的操作)。


var babel = require('babel-core');

var t = require('babel-types');

 

const code = `d = a + b + c`;

 

const visitor = {

Identifier(path) {

console.log(path.node.name);  // d a b c

}

};

 

const result = babel.transform(code, {

plugins: [{

visitor: visitor

}]

});


替换节点


具备了 AST 相关知识和了解 visitor、path 后,就可以编写一个简单的 Babel 插件了。我们要把上述的 abs 函数换成原生支持的 Math.abs 来进行调用 。


首先我们先解析下 abs(-8) 的 AST 结构,直接从表达式语句(ExpressionStatement)开始:


{

  type: "ExpressionStatement",

  expression: {

    type: "CallExpression",

    callee: {

      type: "Identifier",

      name: "abs"

    },

    arguments: [{

      type: "UnaryExpression",

      operator: "-",

      prefix: true,

      arguments: {

        type: "NumericLiteral",

        value: 8

      }

    }]

  }

}


我们可以看到表达式语句下面的 expression 主要是函数调用表达式(CallExpression),因此我们也需要创建一个函数调用表达式,此外,Math.abs 是一个二元操作表达式,属于MemberExpression 类型。上述两个 AST 节点我们可以借助 babel-types 里提供的一些方法帮我们快速创建。


// 创建函数调用表达式

t.CallExpression(

  // 创建对象属性引用

t.MemberExpression(t.identifier('Math'), t.identifier('abs')),

// 原始节点函数调用参数

path.node.arguments

)


最后我们需要对此次函数调用不符合的节点进行过滤,过滤掉名字不等于 abs 的函数调用,因为 Babel 在遍历的过程是递归的,如果不过滤做限制的话,程序将会一直运行最终报调用栈超过阈值的错误。


RangeError: unknown: Maximum call stack size exceeded


最终代码如下:


var babel = require('babel-core');

var t = require('babel-types');

 

const code = `abs(-8);`;

 

const visitor = {

CallExpression(path) {

if (path.node.callee.name !== 'abs') return;

 

path.replaceWith(t.CallExpression(

t.MemberExpression(t.identifier('Math'), t.identifier('abs')),

path.node.arguments

));

}

};

 

const result = babel.transform(code, {

plugins: [{

visitor: visitor

}]

});

 

// Math.abs(-8)

console.log(result.code);


上述例子使用了 transform api 直接解析转换生成了新的代码,另外在单独编写 Babel 插件的时候,暴露的参数里一般都含有常用的 babel-types 对象供使用。


export default function({ types: t }) {

  return {

    visitor: {}

  };

}


总结


通过编写 Babel 插件我们能对 AST 有一定的了解,另外,我认为现阶段 Babel 插件不仅仅止于对 ES6 代码的转换上,npm 上有一系列的插件覆盖了许多适合的应用场景,后续具有一定的探索性。


Reference


  • babylon-spec

  • babel-types

  • babel-for-es6-and-beyond

  • understanding-asts-building-babel-plugin

  • babel-handbook



关注「前端大全」

看更多精选前端技术文章

↓↓↓

 
前端大全 更多文章 有趣的 CSS 题目(1): 左边竖条的实现方法 前端这条路,我们该何去何从 2016年里做前端是怎样一种体验 让我们一起学习JavaScript闭包吧 前端模板的原理与实现
猜您喜欢 可以在SSD上建传统RAID吗? PHP100大讲堂:直播【2013-07-12】跟我一起玩转Mysql数据库(2) Folly源码分析系列(一) — ThreadLocalPtr 认识CoreData-基础使用 可视化图的基本算法