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

代码语言：javascript复制

目录
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

代码语言：javascript复制

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

语法：

代码语言：javascript复制

import ModuleSpecifier

示例：

代码语言：javascript复制

import "webj2ee.css"

AST：

3.1.4. 示例2

语法：

代码语言：javascript复制

import ImportedDefaultBinding from ModuleSpecifier

示例：

代码语言：javascript复制

import React from "react"

AST：

3.1.5. 示例3

语法：

代码语言：javascript复制

import NamespaceImport from ModuleSpecifier

示例：

代码语言：javascript复制

import * as express from 'express';

‍

AST：

3.1.5. 示例4

语法：

代码语言：javascript复制

import NamedImports from ModuleSpecifier

示例：

代码语言：javascript复制

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

AST：

3.2. exports

3.2.1. ES6 语法定义

3.2.2 AST Node

代码语言：javascript复制

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

语法：

代码语言：javascript复制

export * FromClause ;

示例：

代码语言：javascript复制

export * from "react";

AST：

3.2.4. 示例2

语法：

代码语言：javascript复制

export ExportClause FromClause ;

‍

示例：

代码语言：javascript复制

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

AST：

3.2.5. 示例3

语法：

代码语言：javascript复制

export ExportClause ;

‍

示例：

代码语言：javascript复制

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

‍AST：

3.2.6. 示例4

语法：

代码语言：javascript复制

export VariableStatement

示例：

代码语言：javascript复制

export const x = 1;

AST：

3.2.7. 示例5

语法：

代码语言：javascript复制

export default ClassDeclaration

‍示例：

代码语言：javascript复制

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

---

babel.js 编程算法 node.js ecmascript

0 人点赞