1. Python技术站首页
  2. 其他
  3. JavaScript

带你揭开神秘的Javascript AST面纱之Babel AST 四件套的使用方法

• JavaScript

作者：京东零售 周明亮

写在前面

这里我们初步提到了一些基础概念和应用：

  • 分析器
  • 抽象语法树 AST
  • AST 在 JS 中的用途
  • AST 的应用实践

有了初步的认识，还有常规的代码改造应用实践，现在我们来详细说说使用 AST， 如何进行代码改造？

Babel AST 四件套的使用方法

其实在解析 AST 这个工具上，有很多可以使用，上文我们已经提到过了。对于 JS 的 AST 大家已经形成了统一的规范命名，唯一不同的可能是，不同工具提供的详细程度不一样，有的可能会额外提供额外方法或者属性。

所以，在选择工具上，大家按照各自喜欢选择即可，这里我们选择了babel这个老朋友。

初识 Babel

我相信在这个前端框架频出的时代，应该都知道babel的存在。 如果你还没听说过babel，那么我们通过它的相关文档，继续深入学习一下。

因为，它在任何框架里面，我们都能看到它的影子。

  • Babel JS 官网
  • Babel JS Github

作为使用最广泛的 JS 编译器，他可以用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

而它能够做到向下兼容或者代码转换，就是基于代码解析和改造。接下来，我们来说说：如何使用@babel/core里面的核心四件套：@babel/parser、@babel/traverse、@babel/types及@babel/generator。

1. @babel/parser

@babel/parser 核心代码解析器，通过它进行词法分析及语法分析过程，最终转换为我们提到的 AST 形式。

假设我们需要读取React中index.tsx文件中代码内容，我们可以使用如下代码：

const { parse } = require("@babel/parser")

// 读取文件内容
const fileBuffer = fs.readFileSync('./code/app/index.tsx', 'utf8');
// 转换字节 Buffer
const fileCode = fileBuffer.toString();
// 解析内容转换为 AST 对象
const codeAST = parse(fileCode, {
  // parse in strict mode and allow module declarations
  sourceType: "module",
  plugins: [
    // enable jsx and typescript syntax
    "jsx",
    "typescript",
  ],
});

当然我不仅仅只读取React代码，我们甚至可以读取Vue语法。它也有对应的语法分析器，比如：@vue/compiler-dom。

此外，通过不同的参数传入 options，我们可以解析各种各样的代码。如果，我们只是读取普通的.js文件，我们可以不使用任何插件属性即可。

const codeAST = parse(fileCode, {
  // parse in strict mode and allow module declarations
  sourceType: "module"
});

通过上述的代码转换，我们就可以得到一个标准的 AST 对象。在上一篇文章中，已做详细分析，在这里不在展开。比如：

// 原代码
const me = "我"
function write() {
  console.log("文章")
}

// 转换后的 AST 对象
const codeAST = {
  "type": "File",
  "errors": [],
  "program": {
    "type": "Program",
    "sourceType": "module",
    "interpreter": null,
    "body": [
      {
        "type": "VariableDeclaration",
        "declarations": [
          {
            "type": "VariableDeclarator",
            "id": {
              "type": "Identifier",
              "name": "me"
            },
            "init": {
              "type": "StringLiteral",
              "extra": {
                "rawValue": "我",
                "raw": "\"我\""
              },
              "value": "我"
            }
          }
        ],
        "kind": "const"
      },
      {
        "type": "FunctionDeclaration",
        "id": {
          "type": "Identifier",
          "name": "write"
        },
        "generator": false,
        "async": false,
        "params": [],
        "body": {
          "type": "BlockStatement",
          "body": [
            {
              "type": "ExpressionStatement",
              "expression": {
                "type": "CallExpression",
                "callee": {
                  "type": "MemberExpression",
                  "object": {
                    "type": "Identifier",
                    "computed": false,
                    "property": {
                      "type": "Identifier",
                      "name": "log"
                    }
                  },
                  "arguments": [
                    {
                      "type": "StringLiteral",
                      "extra": {
                        "rawValue": "文章",
                        "raw": "\"文章\""
                      },
                      "value": "文章"
                    }
                  ]
                }
              }
            }
          ]
        }
      }
    ]
  }
}

2. @babel/traverse

当我们拿到一个标准的 AST 对象后，我们要操作它，那肯定是需要进行树结构遍历。这时候，我们就会用到 @babel/traverse 。

比如我们得到 AST 后，我们可以进行遍历操作：

const { default: traverse } = require('@babel/traverse');

// 进入结点
const onEnter = pt => {
   // 进入当前结点操作
   console.log(pt)
}
// 退出结点
const onExit = pe => {
  // 退出当前结点操作
}
traverse(codeAST, { enter: onEnter, exit: onExit })

那么我们访问的第一个结点，打印出pt的值，是怎样的呢？

// 已省略部分无效值
<ref *1> NodePath {
  contexts: [
    TraversalContext {
      queue: [Array],
      priorityQueue: [],
      ...
    }
  ],
  state: undefined,
  opts: {
    enter: [ [Function: onStartVist] ],
    exit: [ [Function: onEndVist] ],
    _exploded: true,
    _verified: true
  },
  _traverseFlags: 0,
  skipKeys: null,
  parentPath: null,
  container: Node {
    type: 'File',
    errors: [],
    program: Node {
      type: 'Program',
      sourceType: 'module',
      interpreter: null,
      body: [Array],
      directives: []
    },
    comments: []
  },
  listKey: undefined,
  key: 'program',
  node: Node {
    type: 'Program',
    sourceType: 'module',
    interpreter: null,
    body: [ [Node], [Node] ],
    directives: []
  },
  type: 'Program',
  parent: Node {
    type: 'File',
    errors: [],
    program: Node {
      type: 'Program',
      sourceType: 'module',
      interpreter: null,
      body: [Array],
      directives: []
    },
    comments: []
  },
  hub: undefined,
  data: null,
  context: TraversalContext {
    queue: [ [Circular *1] ],
    priorityQueue: [],
    ...
  },
  scope: Scope {
    uid: 0,
    path: [Circular *1],
    block: Node {
      type: 'Program',
      sourceType: 'module',
      interpreter: null,
      body: [Array],
      directives: []
    },
    ...
  }
}

是不是发现，这一个遍历怎么这么多东西？太长了，那么我们进行省略，只看关键部分：

// 第1次
<ref *1> NodePath {
  listKey: undefined,
  key: 'program',
  node: Node {
    type: 'Program',
    sourceType: 'module',
    interpreter: null,
    body: [ [Node], [Node] ],
    directives: []
  },
  type: 'Program',
}

我们可以看出是直接进入到了程序program结点。 对应的 AST 结点信息：

  program: {
    type: 'Program',
    sourceType: 'module',
    interpreter: null,
    body: [
      [Node]
      [Node]
    ],
  },

接下来，我们继续打印输出的结点信息，我们可以看出它访问的是program.body结点。

// 第2次
<ref *2> NodePath {
  listKey: 'body',
  key: 0,
  node: Node {
    type: 'VariableDeclaration',
    declarations: [ [Node] ],
    kind: 'const'
  },
  type: 'VariableDeclaration',
}

// 第3次
<ref *1> NodePath {
  listKey: 'declarations',
  key: 0,
  node: Node {
    type: 'VariableDeclarator',
    id: Node {
      type: 'Identifier',
      name: 'me'
    },
    init: Node {
      type: 'StringLiteral',
      extra: [Object],
      value: '我'
    }
  },
  type: 'VariableDeclarator',
}

// 第4次
<ref *1> NodePath {
  listKey: undefined,
  key: 'id',
  node: Node {
    type: 'Identifier',
    name: 'me'
  },
  type: 'Identifier',
}

// 第5次
<ref *1> NodePath {
  listKey: undefined,
  key: 'init',
  node: Node {
    type: 'StringLiteral',
    extra: { rawValue: '我', raw: "'我'" },
    value: '我'
  },
  type: 'StringLiteral',
}
  • node当前结点
  • parentPath父结点路径
  • scope作用域
  • parent父结点
  • type当前结点类型

现在我们可以看出这个访问的规律了，他会一直找当前结点node属性，然后进行层层访问其内容，直到将 AST 的所有结点遍历完成。

这里一定要区分NodePath和Node两种类型，比如上面：pt是属于NodePath类型，pt.node才是Node类型。

其次，我们看到提供的方法除了进入 [enter]还有退出 [exit]方法，这也就意味着，每次遍历一次结点信息，也会退出当前结点。这样，我们就有两次机会获得所有的结点信息。

当我们遍历结束，如果找不到对应的结点信息，我们还可以进行额外的操作，进行代码结点补充操作。结点完整访问流程如下：

  • 进入>Program
    • 进入>node.body[0]
      • 进入>node.declarations[0]
        • 进入>node.id
        • 退出<node.id
        • 进入>node.init
        • 退出<node.init
      • 退出<node.declarations[0]
    • 退出<node.body[0]
    • 进入>node.body[1]
      • ...
      • ...
    • 退出<node.body[1]
  • 退出<Program

3. @babel/types

有了前面的铺垫，我们通过解析，获得了相关的 AST 对象。通过不断遍历，我们拿到了相关的结点，这时候我们就可以开始改造了。@babel/types 就提供了一系列的判断方法，以及将普通对象转换为 AST 结点的方法。

比如，我们想把代码转换为：

// 改造前代码
const me = "我"
function write() {
  console.log("文章")
}

// 改造后的代码
let you = "你"
function write() {
  console.log("文章")
}

首先，我们要分析下，这个代码改了哪些内容？

  1. 变量声明从const改为let
  2. 变量名从me改为you
  3. 变量值从"我"改为"你"

那么我们有两种替换方式：

  • 方案一：整体替换，相当于把program.body[0]整个结点进行替换为新的结点。
  • 方案二：局部替换，相当于逐个结点替换结点内容，即：program.body.kind,program.body[0].declarations[0].id，program.body[0].declarations[0].init。

借助@babel/types我们可以这么操作，一起看看区别：

const bbt = require('@babel/types');
const { default: traverse } = require('@babel/traverse');

// 进入结点
const onEnter = p => {
  // 方案一，全结点替换
  if (bbt.isVariableDeclaration(p.node) && p.listKey == 'body') {
    // 直接替换为新的结点
    p.replaceWith(
      bbt.variableDeclaration('let', [
        bbt.variableDeclarator(bbt.identifier('you'),           
        bbt.stringLiteral('你')),
      ]),
    );
  }
  // 方案二，单结点逐一替换
  if (bbt.isVariableDeclaration(p.node) && p.listKey == 'body') {
    // 替换声明变量方式
    p.node.kind = 'let';
  }
  if (bbt.isIdentifier(p.node) && p.node.name == 'me') {
    // 替换变量名
    p.node.name = 'you';
  }
  if (bbt.isStringLiteral(p.node) && p.node.value == '我') {
    // 替换字符串内容
    p.node.value = '你';
  }  
};
traverse(codeAST, { enter: onEnter });

我们发现，不仅可以进行整体结点替换，也可以替换属性的值，都能达到预期效果。

当然 我们不仅仅可以全部遍历，我们也可以只遍历某些属性，比如VariableDeclaration，我们就可以这样进行定义:

traverse(codeAST, { 
  VariableDeclaration: function(p) {
    // 只操作类型为 VariableDeclaration 的结点
    p.node.kind = 'let';
  }
});

@babel/types提供大量的方法供使用，可以通过官网查看。对于@babel/traverse返回的可用方法，可以查看 ts 定义：
babel__traverse/index.d.ts 文件。

常用的方法：p.stop()可以提前终止内容遍历， 还有其他的增删改查方法，可以自己慢慢摸索使用！它就是一个树结构，我们可以操作它的兄弟结点，父节点，子结点。

4. @babel/generator

完成改造以后，我们需要把 AST 再转换回去，这时候我们就需要用到 @babel/generator 工具。只拆不组装，那是二哈【狗头】。能装能组，才是一个完整工程师该干的事情。

废话不多说，上代码：

const fs = require('fs-extra');
const { default: generate } = require('@babel/generator');

// 生成代码实例
const codeIns = generate(codeAST, { retainLines: true, jsescOption: { minimal: true } });

// 写入文件内容
fs.writeFileSync('./code/app/index.js', codeIns.code);

配置项比较多，大家可以参考具体的说明，按照实际需求进行配置。

这里特别提一下：jsescOption: { minimal: true }这个属性，主要是用来保留中文内容，防止被转为unicode形式。

Babel AST 实践

嘿嘿～ 都到这里了，大家应该已经能够上手操作了吧！

什么？还不会，那再把 1 ～ 4 的步骤再看一遍。慢慢尝试，慢慢修改，当你发现其中的乐趣时，这个 AST 的改造也就简单了，并不是什么难事。

留个课后练习：

// 改造前代码
const me = "我"
function write() {
  console.log("文章")
}

// 改造后的代码
const you = "你"
function write() {
  console.log("文章")
}
console.log(you, write())

大家可以去尝试下，怎么操作简单的 AST 实现代码改造！写文章不易，大家记得一键三连哈～

AST 应用是非常广泛，再来回忆下，这个 AST 可以干嘛？

  1. 代码转换领域，如：ES6 转 ES5， typescript 转 js，Taro 转多端编译，CSS预处理器等等。
  2. 模版编译领域，如：React JSX 语法，Vue 模版语法 等等。
  3. 代码预处理领域，如：代码语法检查（ESLint），代码格式化（Prettier），代码混淆/压缩（uglifyjs） 等等
  4. 低代码搭建平台，拖拽组件，直接通过 AST 改造生成后的代码进行运行。

下一期预告

《带你揭开神秘的Javascript AST面纱之手写一个简单的 Javascript 编译器》

原文链接：https://www.cnblogs.com/Jcloud/p/17308807.html

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：带你揭开神秘的Javascript AST面纱之Babel AST 四件套的使用方法 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年4月17日
下一篇 2023年4月17日

相关文章

  • js闭包和垃圾回收机制示例详解

    1. 什么是JavaScript闭包？ 在JavaScript中，当一个函数访问到它定义的外部变量时，就创建了闭包。通俗的说，闭包就是一个函数和执行该函数的环境的组合体。 闭包的作用在于：可以将数据进行封装，使得外部无法访问到函数内部的数据，而只能通过暴露出的接口方法进行访问。这种特性很常见，比如函数库的实现、异步回调等等，都需要使用闭包。 下面是一个简单的…

    JavaScript 2023年6月10日
    00

  • JavaScript使用push方法添加一个元素到数组末尾用法实例

    让我们来解析一下“JavaScript使用push方法添加一个元素到数组末尾用法实例”。 什么是JavaScript的push方法 在JavaScript中，push()方法可以向数组的末尾添加一个或多个元素，并返回该数组的新长度。这个方法的语法是： array.push(item1, item2, …, itemX) 参数： item1, item2,…

    JavaScript 2023年5月27日
    00

  • JavaScript Date 对象

    以下是关于JavaScript Date对象的完整攻略。 JavaScript Date对象 JavaScript Date对象用于处理日期和时间。它可以存储从1970年1月1日00:00:00 UTC协调世界时）开始的毫秒数，并提供了一组方法来处理日期和时间。 下面是一个使用Date对象的示例： var now = new Date(); console.…

    JavaScript 2023年5月11日
    00

  • JavaScript进阶之函数和对象知识点详解

    JavaScript进阶之函数和对象知识点详解 前言 JavaScript 是一门多范式的编程语言，而函数和对象是 JavaScript 语言的两个重要组成部分。了解 JavaScript 函数和对象的知识点是非常重要的，对 JavaScript 程序的编写和效率优化都有着重要的影响。 本篇文章将从概念、语法用法、应用等角度详细讲解 JavaScript 函…

    JavaScript 2023年5月18日
    00

  • js实现文件上传功能 后台使用MultipartFile

    当我们需要在网站中实现文件上传的功能时，可以使用JavaScript来实现前端的交互效果，同时后台使用Spring框架提供的MultipartFile类来处理文件上传。 具体实现步骤如下： 1.在前端HTML页面中，需要提供一个文件上传的表单，并且绑定一个JavaScript的事件，用来监听用户上传的文件。HTML代码示例： <form action=…

    JavaScript 2023年5月27日
    00

  • Javascript注入技巧

    Javascript注入技巧 Javascript注入是一种将代码注入到Web页面中的攻击技巧，它可以通过一些手段在Web页面中运行恶意代码。攻击者可以利用这种技术窃取用户的敏感信息、篡改页面内容、运行恶意程序等，对网站和用户造成不良影响。下面是一些Javascript注入的技巧和示例说明。 基础技巧 1. 隐藏字段注入 隐藏字段注入是一种简单的注入技巧，攻…

    JavaScript 2023年5月18日
    00

  • Javascript json object 与string 相互转换的简单实现

    下面详细讲解一下”Javascript JSON Object与String相互转换的简单实现”的攻略。 什么是JSON？ JSON全称为JavaScript Object Notation，是现在比较流行的一种轻量级的数据交换格式。它使用完全独立于编程语言的文本格式来表示数据。我们可以通过JavaScript中的JSON对象来解析JSON数据，并进行序列化…

    JavaScript 2023年5月27日
    00

  • vue-element的select下拉框赋值实例

    下面是针对vue-element的select下拉框赋值实例的详细攻略： 1. 安装vue-element-ui 首先，在vue项目中安装vue-element-ui库。可以运行以下命令来安装： npm install element-ui -S 接着，在main.js文件中引入并使用vue-element-ui插件： import Vue from ‘vu…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部