【编译技术】:解读 Babel AST Format——04

2020-11-05 10:24:25 浏览数 (1)

1. 什么是 Babel AST Format?

The Babel parser generates AST according to Babel AST format. It is based on ESTree spec with some deviations.

2. 本期涉及哪些 AST node types?

本期涉及:

  • Template Literals
    • TemplateLiteral
    • TaggedTemplateExpression
    • TemplateElement
  • Patterns
    • ObjectPattern
    • ArrayPattern
    • RestElement
    • AssignmentPattern

3. 语法规范回顾

3.1. Template Literals

3.1.1. ES6 语法定义

3.1.2. AST Node

代码语言:javascript复制
export interface TaggedTemplateExpression extends BaseNode {
  type: "TaggedTemplateExpression";
  tag: Expression;
  quasi: TemplateLiteral;
  typeParameters: TypeParameterInstantiation | TSTypeParameterInstantiation | null;
}

export interface TemplateElement extends BaseNode {
  type: "TemplateElement";
  value: { raw: string, cooked?: string };
  tail: boolean;
}

export interface TemplateLiteral extends BaseNode {
  type: "TemplateLiteral";
  quasis: Array<TemplateElement>;
  expressions: Array<Expression>;
}

3.1.3. 示例1:

示例:

代码语言:javascript复制
`string text`

AST:

3.1.4. 示例2:

示例:

代码语言:javascript复制
`string text ${expression} string text`

AST:

3.1.5. 示例3:

示例:

代码语言:javascript复制
tag `string text ${expression} string text`

AST:

3.2. Destructuring Binding Patterns

3.2.1. ES6 语法定义

3.2.2. AST Node

代码语言:javascript复制
export type Pattern = AssignmentPattern | ArrayPattern | ObjectPattern;

export interface AssignmentPattern extends BaseNode {
  type: "AssignmentPattern";
  left: Identifier | ObjectPattern | ArrayPattern | MemberExpression;
  right: Expression;
  decorators: Array<Decorator> | null;
  typeAnnotation: TypeAnnotation | TSTypeAnnotation | Noop | null;
}

export interface ArrayPattern extends BaseNode {
  type: "ArrayPattern";
  elements: Array<null | PatternLike>;
  decorators: Array<Decorator> | null;
  typeAnnotation: TypeAnnotation | TSTypeAnnotation | Noop | null;
}

export interface ObjectPattern extends BaseNode {
  type: "ObjectPattern";
  properties: Array<RestElement | ObjectProperty>;
  decorators: Array<Decorator> | null;
  typeAnnotation: TypeAnnotation | TSTypeAnnotation | Noop | null;
}

3.2.3. 示例1:

示例:

代码语言:javascript复制
const {x, y, ...z} = o;

AST:

3.2.4. 示例2:

示例:

代码语言:javascript复制
const [x, y, ...z] = o;

‍AST:

3.2.5. 示例3:

示例:

代码语言:javascript复制
function add(v1=1, v2=2){}

AST:

参考资料:Modules

template-literals: http://www.ecma-international.org/ecma-262/6.0/index.html#sec-template-literal-lexical-components https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md#template-literals

0 人点赞