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

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 中使用的 JavaScript 解析器。
    • 解析过程分为两个阶段
      • 语法分析:字符流 -> token流
      • 词法分析:token流 -> AST
    • @babel/parser
  • 转换 transform
    • @babel/traverse :允许你浏览、分析和修改抽象语法树
      • Babel接收解析得到的AST并通过 ( babel-traverse ) 对其进行 ( 深度优先遍历 )
      • 在此过程中对节点进行 ( 添加 )、( 更新 ) 及 ( 移除 ) 操作
      • traverse:是遍历的意思
    • @babel/traverse
  • 生成 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')
复制代码
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章