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

WEBJ2EE

发布于 2020-11-05 10:24:25

1K0

发布于 2020-11-05 10:24:25

文章被收录于专栏：WebJ2EEWebJ2EE

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

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：

示例：

`string text`

AST：

3.1.4. 示例2：

示例：

`string text ${expression} string text`

AST：

3.1.5. 示例3：

示例：

tag `string text ${expression} string text`

‍

AST：

‍

3.2. Destructuring Binding Patterns

3.2.1. ES6 语法定义

3.2.2. AST Node

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：

示例：

const {x, y, ...z} = o;

AST：

3.2.4. 示例2：

示例：

const [x, y, ...z] = o;

‍AST：

3.2.5. 示例3：

示例：

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-10-16，如有侵权请联系 cloudcommunity@tencent.com 删除

babel.js