【编译技术】:解读 Babel AST Format——02
时间:2022-07-28
本文章向大家介绍【编译技术】:解读 Babel AST Format——02,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
目录
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
- 看我如何发现Google云平台漏洞并获得$7500赏金
- Go语言写Web 应用程序
- 小萝莉说Crash(一):Unrecognized selector sent to instance xxxx
- 游戏服务器之多线程发送(上)
- 游戏服务器之多线程发送(中)
- 游戏服务器之多线程发送(下)
- 【团队分享】手机QQ:升级iOS8.3后,发图就崩,为哪般?
- golang 字符串操作实例
- 【团队分享】刀锋铁骑:常见Android Native崩溃及错误原因
- OpenShift企业版安装:单Master集群
- http线程池的设计与实现(c++)
- iOS崩溃堆栈符号化,定位问题分分钟搞定!
- Duang~ Android堆栈慘遭毁容?精神哥揭露毁容真相!
- Java学习笔记第一篇:坦克大战游戏
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法