[源码-webpack01-前置知识] AST抽象语法树

导航

[深刻01] 执行上下文
[深刻02] 原型链
[深刻03] 继承
[深刻04] 事件循环
[深刻05] 柯里化 偏函数 函数记忆
[深刻06] 隐式转换 和 运算符
[深刻07] 浏览器缓存机制（http缓存机制）
[深刻08] 前端安全
[深刻09] 深浅拷贝
[深刻10] Debounce Throttle
[深刻11] 前端路由
[深刻12] 前端模块化
[深刻13] 观察者模式 发布订阅模式 双向数据绑定
[深刻14] canvas
[深刻15] webSocket
[深刻16] webpack
[深刻17] http 和 https
[深刻18] CSS-interview
[react] Hooks

[部署01] Nginx
[部署02] Docker 部署vue项目
[部署03] gitlab-CI

[源码-webpack01-前置知识] AST抽象语法树
[源码-webpack02-前置知识] Tapable
[源码-webpack03] 手写webpack - compiler简单编译流程

前置知识

一些单词

abstract：抽象的
( abstract syntax tree：抽象语法树 )

Identifier：标识符
Punctuator ：标点符号

declaration：声明
VariableDeclaration：变量声明
declarator：声明人

traverse：遍历

expression：表达，表达式
performance：性能
// while parseExpression() tries to parse a single Expression with performance in mind.
// 而parseExpression（）会尝试在考虑性能的状况下解析单个Expression

doubt：疑惑
// When in doubt, use .parse() 
// 若是有疑惑的状况，请使用.parse()而不要使用.parseExpression()

Numeric：数字
复制代码

一些网站

AST explorer 查看源码对应的AST和JSON结构
esprima 能够查看词法分词阶段生成的tokens
AST 可视化工具 查看AST可视化树状图
AST 对象文档

从javascript程序到机器可执行的机器码须要经历三个阶段

• 语法检查：词法分析，语法分析
• 编译运行
• 总结：词法分析 -> 语法分析 -> 编译运行

AST

abstract syntax tree：抽象语法树
abstract：抽象的

AST应用场景

• 代码 ( 语法检测 )，代码 ( 风格检测 )，代码 ( 格式化 )，代码 ( 高亮 )，代码 ( 错误提示 )，代码 ( 自动补全 )
• eslint amd cmd
• webpack 经过 babel 转义 js 语法

AST解析过程

• (1) 读取js文件中的 ( 字符流 )
• (2) 经过 ( 词法分析 ) 生成 token ----------- 词法分析也叫扫描scanner，分词阶段，token是一维数组
• (3) 经过 ( 语法分析 ) 生成 AST ------------- 语法分析也叫解析器
• (4) 生成 ( 机器码 ) 执行 -------------------- 编译阶段也叫编译器

词法分析

• 词法分析是将 ( 字符流char stream ) 转换为 ( 记号流token stream )
• token 是不可分割的最小单元，是一个一维数组
• ( 词法分析 ) 也称之为 ( 扫描scanner )
• ( 词法分析器 ) 里的每个 ( 关键字，标识符，操做符，标点符号，字符串，数字，布尔值，注释符，空白字符，空格，换行符 ) 等都是一个token
• token数组中，每个对象包含 ( type ) 和 ( value )
• type
• value
  • 常见的 ( type ) 以下：
  • Keyword （关键词）
  • Identifier （标识符）
  • Punctuator （标点符号）
  • Numeric（数字）
  • String （字符串）
  • Boolean（布尔）
  • Null（空值）
• 最终代码被分割进一个tokens列表，即一维数组

源码1：
const add = (a, b) => {
	return a + b
}

tokens:
[
  { "type": "Keyword", "value": "const" },
  { "type": "Identifier", "value": "add" },
  { "type": "Punctuator", "value": "=" },
  { "type": "Punctuator", "value": "(" },
  { "type": "Identifier", "value": "a" },
  { "type": "Punctuator", "value": "," },
  { "type": "Identifier", "value": "b" },
  { "type": "Punctuator", "value": ")" },
  { "type": "Punctuator", "value": "=>" },
  { "type": "Punctuator", "value": "{" },
  { "type": "Keyword", "value": "return" },
  { "type": "Identifier", "value": "a" },
  { "type": "Punctuator", "value": "+" },
  { "type": "Identifier", "value": "b" },
  { "type": "Punctuator", "value": "}" }
]


---
源码2：
const a = 1;

tokens:
[
    { "type": "Keyword","value": "const" },
    { "type": "Identifier","value": "a" },
    { "type": "Punctuator","value": "=" },
    { "type": "Numeric","value": "1" },
    { "type": "Punctuator","value": ";" }
]


说明：
(1) tokens是具备type,value属性的对象组成的数组
(2) token是词法分析的最小单元，不能再分解
(3) 常见的type
- keyword关键字
- identfier标识符
- punctuator标点符号
- Numeric：数字
复制代码

语法分析

• ( 语法分析 ) 会将词法分析得出的token转化成 ( 有语法含义 ) 的 ( 抽象语法树 ) 结构
• 同时 ( 验证语法 )，有语法错误则抛出语法错误
• 属性
  • 最外层包含：
    • ( type )
    • ( sourceType )
    • ( start )
    • ( end ) 等
    • ( body )
      • body：是一个 ( 数组 ) ，包含多个 ( 内容块对象 statement )，每一个内容块包含
        • type
        • start
        • end
        • kind
        • declarations：乘装变量内容的块，这个块也是一个数组，由于变量声明可能声明多个
          • type
          • start
          • end
          • id
            • type
            • start
            • end
            • name
• ( statement - body数组中的对象 ) 有不少类型，好比说变量声明，函数定义，if语句，while循环，等都是一个statement
  • VariableDeclaration：变量声明
  • FunctionDeclaration：函数定义
  • IfStatement：if语句
  • WhileStatement：while循环

源码：
var a = 1;


AST
{
  "type": "Program",
  "start": 0,
  "end": 12,
  "body": [ // ---------------------------------------------- body表示代码具体的内容
    { // ---------------------------------------------------- statement内容块对象，一个body可能包含多个statement
      "type": "VariableDeclaration", // --------------------- 变量声明
      "start": 0,
      "end": 10,
      "declarations": [
        { 
          "type": "VariableDeclarator", // ------------------ 变量声明
          "start": 4,
          "end": 9,
          "id": {
            "type": "Identifier", // ------------------------- 标识符
            "start": 4,
            "end": 5,
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "start": 8,
            "end": 9,
            "value": 1,
            "raw": "1"
          }
        }
      ],
      "kind": "var" // --------------------------------------- 变量类型
    }
  ],
  "sourceType": "module"
}


说明：
(1) 最外层属性：type，start，end，body[]，sourceType
- body：表示代码的具体内容
    - 内容块：body中可能包含多个内容块，每一个内容块用一个对象表示
    - 内容块包含：
        - type
        - start
        - end
        - kind
        - declarations：乘装变量内容的块，这个块也是一个数组，由于变量声明可能生命多个
            - type
            - start
            - end
            - id
                - type
                - start
                - end
                - name 
- sourceType：表示语言的种类


(2) body是一个数组，成员是statement内容块对象，由于body能够包含多个statement内容块
- statement 有不少类型，好比说变量声明，函数定义，if语句，while循环，等都是一个statement
    - VariableDeclaration：变量声明
    - FunctionDeclaration：函数定义
    - IfStatement：if语句
    - WhileStatement：while循环
复制代码

Babel原理

• babel编译的过程：解析parse -> 转换transform -> 生成generate
• 解析 parse
  • @babel/parser：将字符串转换成AST，Babylon( 如今是@babel/parser ) 是 Babel 中使用的 JavaScript 解析器
  • 解析过程分为两个阶段
    • 语法分析：字符流 -> token流
    • 词法分析：token流 -> AST
  • @babel/parser
• 转换 transform
  • @babel/traverse：主要用于遍历AST
    • Babel接收解析获得的AST并经过 ( babel-traverse ) 对其进行 ( 深度优先遍历 )
    • 在此遍历过程当中对节点进行 ( 添加 )、( 更新 ) 及 ( 移除 ) 操做
    • traverse：是遍历的意思
  • @babel/types：主要用来操做AST，好比 ( 添加 )、( 更新 ) 及 ( 移除 ) 操做
    • 除了手动替换，可使用@babel/types更加房便快捷
    • 至关于做用于 AST 的类 lodash 库
  • @babel/traverse
  • @babel/types
• 生成 generate
  • @babel/generator：来将转换后的抽象语法树转化为Javascript 字符串
    • 将通过转换的AST经过babel-generator再转换为js代码
    • 过程及时深度遍历整个AST,而后构建转换后的代码字符串。
  • @babel/generator

@babel/parser

babelParser.parse(code, [options]) ------------------------------------ 解析全部代码
babelParser.parseExpression(code, [options]) -------------------------- 解析单个表达式

参数：
- code：表示源码字符串
- options：配置对象，可选
    - allowImportExportEverywhere：默认import和export声明只能出如今顶部，当此选项为true则能够出如今任何地方
    - ...
复制代码

@babel/traverse

• 由于 ( @babel/parser解析 ) 和 ( @babel/generator生成 ) 基本不会变化，因此重点是 ( @babel/traverse转换 )

import * as babylon from "babylon";
import traverse from "babel-traverse";

// 源码string
const code = `function square(n) {
  return n * n;
}`;

// 解析 parse：string -> ast
const ast = babylon.parse(code);

// 转换 transform：ast -> modified ast
traverse(ast, {
  enter(path) {
    if (
      path.node.type === "Identifier" &&
      path.node.name === "n"
    ) {
      path.node.name = "x"; // ---------------- 若是是标识符而且标识符的名字是n，就把n改成x
    }
  }
复制代码

@babel/generator

import {parse} from '@babel/parser';
import generate from '@babel/generator';

const code = 'class Example {}';
const ast = parse(code);

const output = generate(ast, { /* options */ }, code);
复制代码

babel转化代码案例

• 需求：将小写变量转换成大写

// 输入
const numberFive = 5;

// 输出
const NUMBERFIVE = 5;
复制代码

• 实现过程

安装 

@babel/core ----------------------- babel核心模块
@babel/parser --------------------- 字符流 -> token流 -> AST
@babel/traverse ------------------- AST -> modified AST
@babel/generator ------------------ modified AST -> 字符流

npm install @babel/core @babel/parser @babel/traverse @babel/generator -S
复制代码

代码

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;

// 源码字符串
const code = `
  const nubmerFive = 5
`;

// 解析
let AST = parser.parse(code)

// 转换
traverse(AST, {
  enter(path) {
    console.log(path.node.type, 'path.node.type')
    if (path.node.type === 'Identifier') { // 若是node类型是标识符，就将name转成大写形式
      path.node.name = path.node.name.toUpperCase()
    }
  }
})

// 生成
const outputObj = generator(AST)
const outputStr = outputObj.code;

console.log(outputStr, 'outputStr')
复制代码

资料

AST babel-AST相关工具 juejin.im/post/5dca1e…
AST 从babel讲到AST juejin.im/post/5ab35c…
AST 99%的人不了解的AST segmentfault.com/a/119000001…
AST 抽象语法树-图形 juejin.im/post/5bff94…
AST 具体细节：segmentfault.com/a/119000001…
AST cheogo.github.io/learn-javas…
AST详细 www.codercto.com/a/88752.htm…

babel转换 juejin.im/post/5dca1e…
babel转换案例 cloud.tencent.com/developer/a…
babel插件介绍 zhuanlan.zhihu.com/p/61780633