babel原理&plugin实战(转)

本文将讲解babel是如何运行的,AST的结构,以及怎么创建一个babel的插件。

再讲babel之前,先不讲babel,AST的这些概念,先带你实现一个简易的babel解析器,这样再回过头来讲这些概念就容易理解多了。

tiny-compiler 编译器

想象一下我们有一些新特性的语法,其中add subtract是普通的函数名,需要转义到正常的javascript语法,以便让浏览器能够兼容的运行。

(add 2 2)

要转义成如下

add(2, 2)

编译器都分为三个步骤:

  • Parsing 解析

  • Transformation 转义

  • Code Generation 代码生成

Parsing 解析

Parsing阶段分成两个子阶段,

  • Lexical Analysis 词法分析

  • Syntactic Analysis语法分析,先写好我们要转化的代码

// 这是我们要转化的code

Lexical Analysis 词法分析

Lexical Analysis 词法分析可以理解为把代码拆分成最小的独立的语法单元,去描述每一个语法,可以是操作符,数字,标点符号等,最后生成token数组。

// 第一步,Lexical Analysis,转化成tokens类似如下

那我们开始实现它吧,干!

function tokenizer(input) {

Syntactic Analysis 语法分析

Syntactic Analysis 语法分析就是根据上一步的tokens数组转化成语法之前的关系,这就是Abstract Syntax Tree,也就是我们常说的AST

// 第二步,Syntactic Analysis,转化成AST类似如下

我们再来实现一个parser,转化成AST。

function parser(tokens) {

从上述代码来看,跟阶段AST是根节点是type=Program,body是一个嵌套的AST数组结构。再单独处理了number和string类型之后,再递归的调用walk函数,以解决嵌套的括号表达式。

Transformation 转义

traverser 遍历器

我们最终的目的肯定是想转化成我们想要的代码,那怎么转化呢?答案就是更改我们刚刚得到的AST结构。

那怎么去改AST呢?直接去操作这个树结构肯定是不现实的,所以我们需要遍历这个AST,利用深度优先遍历的方法遍历这些节点,当遍历到某个节点时,再去调用这个节点对应的方法,再方法里面改变这些节点的值就轻而易举了。

想象一下我们有这样的一个visitor,就是上文说道的遍历时调用的方法

var visitor = {

由于深度优先遍历的特性,我们遍历到一个节点时有enterexit的概念,代表着遍历一些类似于CallExpression这样的节点时,这个语句,enter表示开始解析,exit表示解析完毕。比如说上文中:

 *   -> Program (enter)

然后有一个函数,接受astvistor作为参数,实现遍历,类似于:

traverse(ast, {

先实现traverser吧。

function traverser(ast, visitor) {

transformer 转换器

有了traverser遍历器后,就开始遍历吧,先看看前后两个AST的对比。


这里注意多了一中ExpressionStatement的type,以表示subtract(4, 2)这样的结构。

遍历的过程就是把左侧AST转化成右侧AST

function transformer(ast) {

CodeGeneration 代码生成

那最后一个阶段就是用心生成的AST生成我们最后的代码了,也是生成AST的一个反过程。

function codeGenerator(node) {

总结

这样我们一个tiny-compiler就写好了,最后可以执行下面的代码去试试啦。


从上述代码中就可以看出来,一个代码转化的过程就把包括了tokenizer词法分析阶段,parser预发分析阶段(AST生成),transformer转义阶段,codeGenerator代码生成阶段。那么在写babel-plugin的时候,其实就是在写其中的transformer,其他的部分已经被babel完美的实现了。

babel plugin 概念

先上手看一个简单的babel plugin示例


这个plugin造成的效果:

// 源代码

就是把所有的bool类型的值转化成 !0 或者 !1,这是代码压缩的时候使用的一个技巧。

那么逐行来分析这个简单的plugin。一个plugin就是一个function,入参就是babel对象,这里利用到了babel中types对象,来自于@babel/types这个库,然后操作path对象进行节点替换操作。

path

path是肯定会用到的一个对象。我们可以用过path访问到当前节点,父节点,也可以去调用添加、更新、移动和删除节点有关的其他很多方法。举几个示例

// 访问当前节点的属性,用path.node.property访问node的属性

@babel/types

可以理解它为一个工具库,类似于Lodash,里面封装了非常多的帮做方法,一般用处如下

  • 检查节点 一般在类型前面加is就是判断是否该类型
// 判断当前节点的left节点是否是identifier类型
  • 构建节点
    直接手写复杂的AST结构是不现实的,所以有了一些帮助方法去构建这些节点,示例:
// 调用binaryExpression和identifier的构建方法,生成ast

其中每一种节点都有自己的构造方法,都有自己特定的入参,详细请参考官方文档

scope

最后讲一下作用域的概念,每一个函数,每一个变量都有自己的作用域,在编写babel plugin的时候要特别小心,再改变或者添加代码的时候要注意不要破坏了原有的代码结构。

path.scope中的一些方法可以操作作用域,示例:

// 检查变量n是否被绑定(是否在上下文已经有引用)

plugin实战

写一个自定义plugin是什么步骤呢?

  • 这个plugin用来干嘛

  • 源代码的AST

  • 转换后代码的AST
    tip: 可以去这个网站查看代码的AST。

plugin的目的

现在就做一个自定义的plugin,大家在应用写代码的时候可以通过webpack配置alias,比如说配置@ -> ./src,这样import的时候就直接从src目录下找所需要的代码了,那么大家有在写组件的时候用过这个功能吗?这就是我们这个plugin的目的。

代码

我们有如下配置

"alias": {

源代码以及要转化的代码如下:

// ./src/index.js

AST

源码的AST展示如下

图片

那我们看见是不是只需要找到ImportDeclaration节点中将source改成转换之后的代码是不是就可以了。

开始写plugin

const localPath = require('path');

用plugin

回到我们的babel配置文件中来,这里我们用的是babel.config.json

{

这样一个plugin的流程就走完了,欢迎大家多多交流。

你可能感兴趣的:(babel原理&plugin实战(转))