0.前言

本篇博客为webpack_deom01 (opens new window)项目仓库笔记，主要有以下内容：

1. AST 的含义及其应用
2. Babel中操作AST 树的API说明。
3. 使用AST 操作完成两个案例:
   • 将 let 转化为 var。
   • 将 import 导入的模块保存在数组中(depRelation)，实现对模块的静态分析。

1.什么是AST，及AST的应用

AST 是 Abstract Syntax Tree 的简称，是前端工程化绕不过的一个名词。它涉及到工程化诸多环节的应用，比如:

1. 如何将 Typescript 转化为 Javascript (typescript)
2. 如何将 SASS/LESS 转化为 CSS (sass/less)
3. ⭐️如何将 ES6+ 转化为 ES5 (babel)
4. 如何将 Javascript 代码进行格式化 (eslint/prettier)
5. 如何识别 React 项目中的JSX(babel)
6. ❓GraphQL、MDX、Vue SFC 等等

而在语言转换的过程中，实质上就是对其 AST 的操作，核心步骤就是 AST 三步走

1. Code -> AST (Parse)

2. AST -> AST (Transform)

3. AST -> Code (Generate)

在案例1中使用babel完成AST转换，实现变量声明(VariableDeclaration)语法的降级(将let改为var)。

初始code为：

const code = `let a = 'let'; let b = 2`;

let a = 'let' 将被解析为以下的AST 树结构：

"body": [
  {
    "type": "VariableDeclaration",
    "declarations": [
      {
        "type": "VariableDeclarator",
        "id": {
          "type": "Identifier",
          "name": "a"
        },
        "init": {
          "type": "StringLiteral",
          "extra": {
            "rawValue": "let",
            "raw": "'let'"
          },
          "value": "let"
        }
      }
    ],
    "kind": "let"
  },
  ...
]

上述 AST 基本将 code 的行为做一个很好的表征：

• 等式左侧：

  • 变量声明：type: "VariableDeclaration"
  • 类型：kind: "let"

• 等式右侧：

  • 值的类型：字符串 StringLiteral、数值 NumericLiteral
  • 值为：value: "let"

2.AST树操作

这部分主要借助的Babel库提供的三个底层的API：

import { parse } from "@babel/parser"
import traverse from "@babel/traverse"
import generate from "@babel/generator"

转化操作：

const code = `let a = 'let'; let b = 2`;

// parse: Code => AST（引用地址）
const ast = parse(code, { sourceType: "module" });

// traverse : AST => Code 
// 无输出，直接修改的原 AST 树
traverse(ast, {
  enter: (item) => {
    if (item.node.type === "VariableDeclaration") {
      if (item.node.kind === "let") {
        item.node.kind = "var";
      }
    }
  },
});

// generate
const result = generate(ast, {}, code);

3. Babel 家族简介

一般情况而言，我们不会直接使用parser、traverse、generator这三个 Api 对 AST 树进行操作，Babel 已经封装好更为简洁的操作AST树的API，这些库封装在@babel/core ，主要提供以下两类AST操作能力:

1. 可以直接生成 code 的 API:

   • 从 code 转化为 code

     • transform 、transformSync

   • 从 file 转化为 code

     • transformFile、transformFileSync：大部分情况下，code的形式不是以字符串的形式，而是需要通过fs.readFile的形式读取的，具体见案例3。

   • 从 Ast 转化为 code

     • transformFromAst、transformFromAstSync：

2. 与解析相关的 API:

   • parse ：仅支持 babel v7 之前的版本，v8 不再对该 api向后兼容。
   • 新版请使用：parseSync 和 parseAsync

详细，各APi的使用见：@babel/core (opens new window) 官方文档

上述api在使用时，还可在转化时设置option，如在babel中内置着许多的preset（预制）

const result = babel.transformFromAstSync(ast, es6Code, {
  presets: ["@babel/preset-env"],
});

其中， @babel/preset-env 是一个智能预设，允许当前环境使用最新的 JavaScript而不需要针对目标宿主环境进行额外的调整，preset-env将会所有 ES2015-ES2020 代码自动转化为 ES5 代码。

具体实践见：案例3

4.使用AST树：分析 Webpack 模块依赖

在【案例4】中，存在 4 个 project文件夹，分别对应着以下几种情况：

1. project_1与deps.ts文件：基础模块分析实现。
2. project_2与deps2.ts文件：递归分析深层依赖。
3. project_3与deps3.ts文件：可以对循环依赖进行静态分析。

核心实现原理：

检查代码中是否有 import "./xxx.js" 这段代码，也即 AST 树中搜索 path.node.type 是否有ImportDeclaration类型。如果存在则将path.node.source.value中的内容存入depRelation数组中。

traverse(ast, {
    enter: (path) => {
      if (path.node.type === "ImportDeclaration") {
        // path.node.source.value 往往是一个相对路径，如 ./a.js，需要先把它转为一个绝对路径
        const depAbsolutePath = resolve(
          dirname(filepath),
          path.node.source.value
        );
        // 然后转为项目路径
        const depProjectPath = getProjectPath(depAbsolutePath);
        // 把依赖写进 depRelation
        depRelation[key].deps.push(depProjectPath);
        collectCodeAndDeps(depAbsolutePath);
      }
    },
});

5.总结：

1. AST相关：

   • parse: 把代码 code 变成 AST。
   • traverse: 遍历 AST进行修改。
   • generate: 把 AST 变成代码 code2。

2. 工具：

   • @babel/parser
   • @babel/traverse
   • @babel/generator
   • @babel/core 包含前三者
   • @babel/preset-env 内置了ES6转ES5的很多规则

3. 构建了一个 dep.ts 函数实现对模块的依赖分析。

6.参考资料：

1. 程序员山月 (opens new window)