玩转ast- 手写babel插件篇

发表于 1年以前 | 总阅读数：638 次

AST

抽象语法树是什么？

抽象语法树（Abstract Syntax Tree，AST）是源代码语法结构的一种抽象表示
它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构
每个包含type属性的数据结构，都是一个AST节点；

以下是普通函数function ast(){},转换为ast后的格式：

抽象语法树用途有哪些？

代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全、实现一套代码适配多端运行等等
优化变更代码，改变代码结构使达到想要的结构

webpack、Lint等这些工具的原理都是通过 JavaScript Parser 把源代码转化为一颗抽象语法树（AST），通过操纵这颗树，我们可以精准的定位到声明语句、赋值语句、运算语句等等，实现对代码的分析、优化、变更等操作。

JavaScript解析器

那什么是JavaScript解析器呢？ JavaScript解析器的作用，把JavaScript源码转化为抽象语法树。浏览器会把js源码通过解析器转换为ast，再进一步转换为字节码或者直接生成机器码，进行渲染和执行。一般来说，每个js引擎都有自己的抽象语法树格式，Chrome的v8引擎， firfox的Spider Monkey引擎等。

JavaScript解析器通常可以包含四个组成部分。

词法分析器（Lexical Analyser）
语法解析器（Syntax Parser）
字节码生成器（Bytecode generator）
字节码解释器（Bytecode interpreter）

词法分析器（Lexical Analyser）

首先词法分析器会扫描（scanning）代码，将一行行源代码，通过switch case 把源码？“/为一个个小单元，jS代码有哪些语法单元呢？大致有以下这些：

空白：JS中连续的空格、换行、缩进等这些如果不在字符串里，就没有任何实际逻辑意义，所以把连续的空白符直接组合在一起作为一个语法单元。
注释：行注释或块注释，虽然对于人类来说有意义，但是对于计算机来说知道这是个“注释”就行了，并不关心内容，所以直接作为一个不可再拆的语法单元
字符串：对于机器而言，字符串的内容只是会参与计算或展示，里面再细分的内容也是没必要分析的
数字：JS语言里就有16、10、8进制以及科学表达法等数字表达语法，数字也是个具备含义的最小单元
标识符：没有被引号扩起来的连续字符，可包含字母、_、$、及数字（数字不能作为开头）。标识符可能代表一个变量，或者true、false这种内置常量、也可能是if、return、function这种关键字，是哪种语义，分词阶段并不在乎，只要正确切分就好了。
运算符：+、-、*、/、>、<等等
括号：(...)可能表示运算优先级、也可能表示函数调用，分词阶段并不关注是哪种语义，只把“(”或“)”当做一种基本语法单元

就是一个字符一个字符地遍历，然后通过switch case分情况讨论，整个实现方法就是顺序遍历和大量的条件判断。以@babel/parser源码为例：

getTokenFromCode(code) {
  switch (code) {
    case 46:
      this.readToken_dot();
      return;

    case 40:
      ++this.state.pos;
      this.finishToken(10);
      return;

    case 41:
      ++this.state.pos;
      this.finishToken(11);
      return;

    case 59:
      ++this.state.pos;
      this.finishToken(13);
      return;

      // 此处省略...

    case 92:
      this.readWord();
      return;

    default:
      if (isIdentifierStart(code)) {
        this.readWord(code);
        return;
      }

  }

}

readToken_dot() {
  // charCodeAt一个一个向后移
  const next = this.input.charCodeAt(this.state.pos + 1);

  if (next >= 48 && next <= 57) {
    this.readNumber(true);
    return;
  }

  if (next === 46 && this.input.charCodeAt(this.state.pos + 2) === 46) {
    this.state.pos += 3;
    this.finishToken(21);
  } else {
    ++this.state.pos;
    this.finishToken(16);
  }
}

语法解析器

将上一步生成的数组，根据语法规则，转为抽象语法树（Abstract Syntax Tree，简称AST）。以 const a = 1 为例，词法分析中获得了 const 这样一个 token，并判断这是一个关键字，根据这个 token 的类型，判断这是一个变量声明语句。以@babel/parser源码为例，执行 parseVarStatement 方法。

parseVarStatement(node, kind, allowMissingInitializer = false) {
    const {
      isAmbientContext
    } = this.state;
    const declaration = super.parseVarStatement(node, kind, allowMissingInitializer || isAmbientContext);
    if (!isAmbientContext) return declaration;


    for (const {
      id,
      init
    } of declaration.declarations) {
      if (!init) continue;


      if (kind !== "const" || !!id.typeAnnotation) {
        this.raise(TSErrors.InitializerNotAllowedInAmbientContext, {
          at: init
        });
      } else if (init.type !== "StringLiteral" && init.type !== "BooleanLiteral" && init.type !== "NumericLiteral" && init.type !== "BigIntLiteral" && (init.type !== "TemplateLiteral" || init.expressions.length > 0) && !isPossiblyLiteralEnum(init)) {
        this.raise(TSErrors.ConstInitiailizerMustBeStringOrNumericLiteralOrLiteralEnumReference, {
          at: init
        });
      }
    }


    return declaration;
  }

经过这一步的处理，最终 const a = 1 会变成如下ast结构：

字节码生成器

字节码生成器的作用，是将抽象语法树转为JavaScript引擎可以执行的二进制代码。目前，还没有统一的JavaScript字节码的格式标准，每种JavaScript引擎都有自己的字节码格式。最简单的做法，就是将语义单位翻成对应的二进制命令。

字节码解释器

字节码解释器的作用是读取并执行字节码。

几种常见的解析器

Esprima

这是第一个用JavaScript编写的符合EsTree规范的JavaScript的解析器，后续多个编译器都是受它的影响

acorn

acorn 和 Esprima 很类似，输出的ast都是符合 EsTree 规范的，目前webpack的AST解析器用的就是acorn

@babel/parser(babylon)

babel官方的解析器，最初fork于acorn，后来完全走向了自己的道路，从babylon改名之后，其构建的插件体系非常强大

uglify-js

用于混淆和压缩代码，因为一些原因，uglify-js自己[内部实现了一套AST规范，也正是因为它的AST是自创的，不是标准的ESTree，es6以后新语法的AST，都不支持，所以没有办法压缩最新的es6的代码，如果需要压缩，可以用类似babel这样的工具先转换成ES5。

esbuild

esbuild是用go编写的下一代web打包工具，它拥有目前最快的打包记录和压缩记录，snowpack和vite的也是使用它来做打包工具，为了追求卓越的性能，目前没有将AST进行暴露，也无法修改AST，无法用作解析对应的JavaScript。

babel

下面先介绍下babel相关工具库，以及一些API，了解完这些基础概念后，我们会利用这些工具操作AST来编写一个babel插件。

@babel/parser 可以把源码转换成AST
@babel/traverse用于对 AST 的遍历，维护了整棵树的状态，并且负责替换、移除和添加节点
@babel/generate 可以把AST生成源码，同时生成sourcemap
@babel/types 用于 AST 节点的 Lodash 式工具库, 它包含了构造、验证以及变换 AST 节点的方法，对编写处理 AST 逻辑非常有用
@babel/template可以简化AST的创建逻辑
@babel/code-frame可以打印代码位置
@babel/core Babel 的编译器，核心 API 都在这里面，比如常见的 transform、parse,并实现了插件功能
babylon Babel 的解析器，以前叫babel parser,是基于acorn扩展而来，扩展了很多语法,可以支持es2020、jsx、typescript等语法
babel-types-api ：https://babeljs.io/docs/en/babel-types.html
Babel 插件手册：https://github.com/brigand/babel-plugin-handbook/blob/master/translations/zh-Hans/README.md#asts

Visitor

访问者模式 Visitor 对于某个对象或者一组对象，不同的访问者，产生的结果不同，执行操作也不同
Visitor 的对象定义了用于 AST 中获取具体节点的方法
Visitor 上挂载以节点 type 命名的方法，当遍历 AST 的时候，如果匹配上 type，就会执行对应的方法

path

node 当前 AST 节点
parent 父 AST 节点
parentPath 父AST节点的路径
scope 作用域
get(key) 获取某个属性的 path
set(key, node) 设置某个属性
is类型(opts) 判断当前节点是否是某个类型
find(callback) 从当前节点一直向上找到根节点(包括自己)
findParent(callback) 从当前节点一直向上找到根节点(不包括自己)
insertBefore(nodes) 在之前插入节点
insertAfter(nodes) 在之后插入节点
replaceWith(replacement) 用某个节点替换当前节点
replaceWithMultiple(nodes) 用多个节点替换当前节点
replaceWithSourceString(replacement) 把源代码转成AST节点再替换当前节点
remove() 删除当前节点
traverse(visitor, state) 遍历当前节点的子节点,第1个参数是节点，第2个参数是用来传递数据的状态
skip() 跳过当前节点子节点的遍历
stop() 结束所有的遍历
getSibling(key) 获取某个下标的兄弟节点
getNextSibling() 获取下一个兄弟节点
getPrevSibling() 获取上一个兄弟节点
getAllPrevSiblings() 获取之前的所有兄弟节点
getAllNextSiblings() 获取之后的所有兄弟节点

scope

• scope.bindings 当前作用域内声明所有变量 • scope.path 生成作用域的节点对应的路径 • scope.references 所有的变量引用的路径 • getAllBindings() 获取从当前作用域一直到根作用域的集合 • getBinding(name) 从当前作用域到根使用域查找变量 • getOwnBinding(name) 在当前作用域查找变量 • parentHasBinding(name, noGlobals) 从当前父作用域到根使用域查找变量 • removeBinding(name) 删除变量 • hasBinding(name, noGlobals) 判断是否包含变量 • moveBindingTo(name, scope) 把当前作用域的变量移动到其它作用域中 • generateUid(name) 生成作用域中的唯一变量名,如果变量名被占用就在前面加下划线 • scope.dump() 打印自底向上的作用域与变量信息到控制台

实现eslint插件

上面这些概念在我们编写babel插件时会用到，接下来我们来实现一个eslint移除console.log()插件吧！先看下 console.log('a') 的AST长什么样子？

可以看到 console.log('a') 是一个type为 “ExpressionStatement”的节点，所以我们只需要遍历AST，当遇到type=ExpressionStatement的节点删除即可！来一起实现吧～

1 . 引入基础包

var fs = require("fs");
//babel核心模块,里面包含transform方法用来转换源代码。
const core = require('@babel/core');
//用来生成或者判断节点的AST语法树的节点
let types = require("@babel/types");

2. 遍历AST节点，babel插件的语法都是固定的，里面包含visitor，我们只需在visitor里面处理ExpressionStatement即可，

//no-console 禁用 console
const eslintPlugin = ({ fix }) => {
  // babel插件的语法都是固定的，里面包含visitor
    return {
      pre(file) {
        file.set('errors', []);
      },
      // 访问器
      visitor: {
        CallExpression(path, state) {
          const errors = state.file.get('errors');
          const { node } = path
          if (node.callee.object && node.callee.object.name === 'console') {
            errors.push(path.buildCodeFrameError(`代码中不能出现console语句`, Error));
            if (fix) {
              path.parentPath.remove();
            }
          }
        }
      },
      post(file) {
        // console.log(...file.get('errors'));
      }
    }
  };

3 . 完整实现：

var fs = require("fs");
//babel核心模块,里面包含transform方法用来转换源代码。
const core = require('@babel/core');
//用来生成或者判断节点的AST语法树的节点
let types = require("@babel/types");

//no-console 禁用 console
const eslintPlugin = ({ fix }) => {
  // babel插件的语法都是固定的，里面包含visitor
    return {
      pre(file) {
        file.set('errors', []);
      },
      // 访问器
      visitor: {
        CallExpression(path, state) {
          const errors = state.file.get('errors');
          const { node } = path
          if (node.callee.object && node.callee.object.name === 'console') {
            errors.push(path.buildCodeFrameError(`代码中不能出现console语句`, Error));
            if (fix) {
              path.parentPath.remove();
            }
          }
        }
      },
      post(file) {
        // console.log(...file.get('errors'));
      }
    }
  };

core.transformFile("eslint/source.js",{
    plugins: [eslintPlugin({ fix: false })]
}, function(err, result) {
    result; // => { code, map, ast }
    console.log(result.code);
  })

- END -