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

WEBJ2EE

发布于 2020-10-26 15:10:42

1.1K0

发布于 2020-10-26 15:10:42

文章被收录于专栏：WebJ2EEWebJ2EE

目录
1. 什么是 Babel AST Format？
2. 本期涉及哪些 AST node types？
3. 语法规范回顾
    3.1. imports
    3.2. exports

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？

本期涉及：

Modules
- ModuleDeclaration
- ModuleSpecifier
- Imports
  - ImportDeclaration
  - ImportSpecifier
  - ImportDefaultSpecifier
  - ImportNamespaceSpecifier
  - ImportAttribute
- Exports
  - ExportNamedDeclaration
  - ExportSpecifier
  - ExportDefaultDeclaration
  - ExportAllDeclaration

3. 语法规范回顾

3.1. imports

3.1.1. ES6 语法定义

3.1.2 AST Node

export type ModuleDeclaration = ExportAllDeclaration | ExportDefaultDeclaration | ExportNamedDeclaration | ImportDeclaration;

export interface ImportDeclaration extends BaseNode {
  type: "ImportDeclaration";
  specifiers: Array<ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier>;
  source: StringLiteral;
  importKind: "type" | "typeof" | "value" | null;
}

export interface ImportSpecifier extends BaseNode {
  type: "ImportSpecifier";
  local: Identifier;
  imported: Identifier;
  importKind: "type" | "typeof" | null;
}

export interface ImportDefaultSpecifier extends BaseNode {
  type: "ImportDefaultSpecifier";
  local: Identifier;
}

export interface ImportNamespaceSpecifier extends BaseNode {
  type: "ImportNamespaceSpecifier";
  local: Identifier;
}

3.1.3. 示例1

语法：

import ModuleSpecifier

示例：

import "webj2ee.css"

AST：

3.1.4. 示例2

语法：

import ImportedDefaultBinding from ModuleSpecifier

示例：

import React from "react"

AST：

3.1.5. 示例3

语法：

import NamespaceImport from ModuleSpecifier

示例：

import * as express from 'express';

‍

AST：

3.1.5. 示例4

语法：

import NamedImports from ModuleSpecifier

示例：

import {useState as MyUseState, useEffect} from 'React';

AST：

3.2. exports

3.2.1. ES6 语法定义

3.2.2 AST Node

export type ExportDeclaration = ExportAllDeclaration | ExportDefaultDeclaration | ExportNamedDeclaration;

export interface ExportAllDeclaration extends BaseNode {
  type: "ExportAllDeclaration";
  source: StringLiteral;
}

export interface ExportDefaultDeclaration extends BaseNode {
  type: "ExportDefaultDeclaration";
  declaration: FunctionDeclaration | TSDeclareFunction | ClassDeclaration | Expression;
}

export interface ExportNamedDeclaration extends BaseNode {
  type: "ExportNamedDeclaration";
  declaration: Declaration | null;
  specifiers: Array<ExportSpecifier | ExportDefaultSpecifier | ExportNamespaceSpecifier>;
  source: StringLiteral | null;
  exportKind: "type" | "value" | null;
}

export interface ExportSpecifier extends BaseNode {
  type: "ExportSpecifier";
  local: Identifier;
  exported: Identifier;
}

3.2.3. 示例1

语法：

export * FromClause ;

示例：

export * from "react";

AST：

3.2.4. 示例2

语法：

export ExportClause FromClause ;

‍

示例：

export {useState as MyUseState, useEffect} from "react";

AST：

3.2.5. 示例3

语法：

export ExportClause ;

‍

示例：

const add = 1, sub = 3;
export {add as MyAdd, sub}

‍AST：

3.2.6. 示例4

语法：

export VariableStatement

示例：

export const x = 1;

AST：

3.2.7. 示例5

语法：

export default ClassDeclaration

‍示例：

export default function add(){};

‍

AST：

参考资料：Modules

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