【编译技术】:解读 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
- 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 数组属性和方法
- Ubuntu18.04(linux)安装MySQL的方法步骤
- ubuntu18.0.4安装mysql并解决ERROR 1698 (28000): Access denied for user ''root''@''localhost''
- 动态在线扩容root根分区大小的方法详解
- centos7使用rpm安装mysql5.7的教程图解
- 关于Linux命令行下的数学运算示例详解
- Apache访问日志的配置与使用
- linux启动和重启nginx方法
- 简单谈谈centos7中配置php
- Linux动态链接库的使用
- Linux下部署springboot项目的方法步骤
- Linux、CentOS下安装zip与unzip指令功能(服务器)
- Linux上查看用户创建日期的几种方法总结
- 详解基于Linux的LVM无缝磁盘水平扩容
- CentOS平台实现搭建rsync远程同步服务器的方法
- CentOS 8设置自动更新的完整步骤