导航
[[深入01] 执行上下文](https://juejin.im/post/684490...
[[深入02] 原型链](https://juejin.im/post/684490...
[[深入03] 继承](https://juejin.im/post/684490...
[[深入04] 事件循环](https://juejin.im/post/684490...
[[深入05] 柯里化 偏函数 函数记忆](https://juejin.im/post/684490...
[[深入06] 隐式转换 和 运算符](https://juejin.im/post/684490...
[[深入07] 浏览器缓存机制(http缓存机制)](https://juejin.im/post/684490...
[[深入08] 前端安全](https://juejin.im/post/684490...
[[深入09] 深浅拷贝](https://juejin.im/post/684490...
[[深入10] Debounce Throttle](https://juejin.im/post/684490...
[[深入11] 前端路由](https://juejin.im/post/684490...
[[深入12] 前端模块化](https://juejin.im/post/684490...
[[深入13] 观察者模式 发布订阅模式 双向数据绑定](https://juejin.im/post/684490...
[[深入14] canvas](https://juejin.im/post/684490...
[[深入15] webSocket](https://juejin.im/post/684490...
[[深入16] webpack](https://juejin.im/post/684490...
[[深入17] http 和 https](https://juejin.im/post/684490...
[[深入18] CSS-interview](https://juejin.im/post/684490...
[[深入19] 手写Promise](https://juejin.im/post/684490...
[[深入20] 手写函数](https://juejin.im/post/684490...
[[react] Hooks](https://juejin.im/post/684490...
[[部署01] Nginx](https://juejin.im/post/684490...
[[部署02] Docker 部署vue项目](https://juejin.im/post/684490...
[[部署03] gitlab-CI](https://juejin.im/post/684490...
[[源码-webpack01-前置知识] AST抽象语法树](https://juejin.im/post/684490...
[[源码-webpack02-前置知识] Tapable](https://juejin.im/post/684490...
[[源码-webpack03] 手写webpack - compiler简单编译流程](https://juejin.im/post/684490...
[[源码] Redux React-Redux01](https://juejin.im/post/684490...
[[源码] axios ](https://juejin.im/post/684490...
[[源码] vuex ](https://juejin.im/post/684490...
[[源码-vue01] data响应式 和 初始化渲染 ](https://juejin.im/post/684490...
[[源码-vue02] computed 响应式 - 初始化,访问,更新过程 ](https://juejin.im/post/684490...
[[源码-vue03] watch 侦听属性 - 初始化和更新 ](https://juejin.im/post/684490...
[[源码-vue04] Vue.set 和 vm.$set ](https://juejin.im/post/684490...
[[源码-vue05] Vue.extend ](https://juejin.im/post/684490...
[[源码-vue06] Vue.nextTick 和 vm.$nextTick ](https://juejin.im/post/684790...
前置知识
一些单词
abstract:抽象的
( abstract syntax tree:抽象语法树 )
Identifier:标识符
Punctuator :标点符号
declaration:声明
VariableDeclaration:变量声明
declarator:声明人
traverse:遍历
expression:表达,表达式
performance:性能
// while parseExpression() tries to parse a single Expression with performance in mind.
// 而parseExpression()会尝试在考虑性能的情况下解析单个Expression
doubt:疑惑
// When in doubt, use .parse()
// 如果有疑惑的情况,请使用.parse()而不要使用.parseExpression()
Numeric:数字
一些网站
AST explorer 查看源码对应的AST和JSON结构
esprima 可以查看词法分词阶段生成的tokens
AST 可视化工具 查看AST可视化树状图
AST 对象文档
从javascript程序到机器可执行的机器码需要经历三个阶段
- 语法检查:词法分析,语法分析
- 编译运行
- 总结:词法分析 -> 语法分析 -> 编译运行
AST
abstract syntax tree:抽象语法树
abstract:抽象的
AST应用场景
- 代码 ( 语法检测 ),代码 ( 风格检测 ),代码 ( 格式化 ),代码 ( 高亮 ),代码 ( 错误提示 ),代码 ( 自动补全 )
- eslint amd cmd
- <font color=red> webpack 通过 babel 转义 js 语法 </font>
AST解析过程
- (1) 读取js文件中的 ( <font color=red>字符流</font> )
- (2) 通过 ( <font color=red>词法分析</font> ) 生成 token ----------- 词法分析也叫扫描scanner,分词阶段,token是一维数组
- (3) 通过 ( <font color=red>语法分析</font> ) 生成 AST ------------- 语法分析也叫解析器
- (4) 生成 ( <font color=red>机器码</font> ) 执行 -------------------- 编译阶段也叫编译器
词法分析
- 词法分析是将 ( <font color=red>字符流char stream</font> ) 转换为 ( <font color=red>记号流token stream</font> )
- <font color=red>token 是不可分割的最小单元,是一个一维数组</font>
- ( 词法分析 ) 也称之为 ( 扫描scanner )
- ( <font color=red>词法分析器</font> ) 里的每一个 (<font color=red> 关键字,标识符,操作符,标点符号,字符串,数字,布尔值,注释符,空白字符,空格,换行符</font> ) 等都是一个token
- <font color=blue>token数组中,每一个对象包含 ( type ) 和 ( value )</font>
- type
value
- 常见的 ( type ) 如下:
- <font color=blue>Keyword (关键词)</font>
- <font color=blue>Identifier (标识符)</font>
- <font color=blue>Punctuator (标点符号)</font>
- <font color=blue>Numeric(数字)</font>
- <font color=blue>String (字符串)</font>
- <font color=blue>Boolean(布尔)</font>
- <font color=blue>Null(空值)</font>
最终代码被分割进一个tokens列表,即一维数组
源码1: const add = (a, b) => { return a + b } tokens: [ { "type": "Keyword", "value": "const" }, { "type": "Identifier", "value": "add" }, { "type": "Punctuator", "value": "=" }, { "type": "Punctuator", "value": "(" }, { "type": "Identifier", "value": "a" }, { "type": "Punctuator", "value": "," }, { "type": "Identifier", "value": "b" }, { "type": "Punctuator", "value": ")" }, { "type": "Punctuator", "value": "=>" }, { "type": "Punctuator", "value": "{" }, { "type": "Keyword", "value": "return" }, { "type": "Identifier", "value": "a" }, { "type": "Punctuator", "value": "+" }, { "type": "Identifier", "value": "b" }, { "type": "Punctuator", "value": "}" } ] --- 源码2: const a = 1; tokens: [ { "type": "Keyword","value": "const" }, { "type": "Identifier","value": "a" }, { "type": "Punctuator","value": "=" }, { "type": "Numeric","value": "1" }, { "type": "Punctuator","value": ";" } ] 说明: (1) tokens是具有type,value属性的对象组成的数组 (2) token是词法分析的最小单元,不能再分解
- keyword关键字
- identfier标识符
- punctuator标点符号
Numeric:数字
语法分析
- ( <font color=red>语法分析</font> ) 会将词法分析得出的token转化成 ( <font color=red>有语法含义</font> ) 的 ( <font color=red>抽象语法树</font> ) 结构
- 同时 ( <font color=red>验证语法</font> ),有语法错误则抛出语法错误
属性
最外层包含:
- ( <font color=red>type</font> )
- ( <font color=red>sourceType</font> )
- ( start )
- ( end ) 等
( <font color=red>body</font> )
body:是一个 ( 数组 ) ,包含多个 ( <font color=red>内容块对象 statement </font> ),每个内容块包含
- type
- start
- end
- kind
<font color=red>declarations</font>:乘装变量内容的块,这个块也是一个数组,因为变量声明可能声明多个
- type
- start
- end
<font color=red>id</font>
- type
- start
- end
- <font color=red>name</font>
( statement - body数组中的对象 ) 有很多类型,比如说变量声明,函数定义,if语句,while循环,等都是一个statement
- VariableDeclaration:变量声明
- FunctionDeclaration:函数定义
- IfStatement:if语句
- WhileStatement:while循环
源码: var a = 1; AST { "type": "Program", "start": 0, "end": 12, "body": [ // ---------------------------------------------- body表示代码具体的内容 { // ---------------------------------------------------- statement内容块对象,一个body可能包含多个statement "type": "VariableDeclaration", // --------------------- 变量声明 "start": 0, "end": 10, "declarations": [ { "type": "VariableDeclarator", // ------------------ 变量声明 "start": 4, "end": 9, "id": { "type": "Identifier", // ------------------------- 标识符 "start": 4, "end": 5, "name": "a" }, "init": { "type": "Literal", "start": 8, "end": 9, "value": 1, "raw": "1" } } ], "kind": "var" // --------------------------------------- 变量类型 } ], "sourceType": "module" } 说明:
body:表示代码的具体内容
- 内容块:body中可能包含多个内容块,每个内容块用一个对象表示
内容块包含:
- type
- start
- end
- kind
declarations:乘装变量内容的块,这个块也是一个数组,因为变量声明可能生命多个
- type
- start
- end
id
- type
- start
- end
- name
sourceType:表示语言的种类
(2) body是一个数组,成员是statement内容块对象,因为body可以包含多个statement内容块
statement 有很多类型,比如说变量声明,函数定义,if语句,while循环,等都是一个statement
- VariableDeclaration:变量声明
- FunctionDeclaration:函数定义
- IfStatement:if语句
- WhileStatement:while循环
Babel原理
- babel编译的过程:<font color=red>解析parse -> 转换transform -> 生成generate</font>
解析 parse
- <font color=red>@babel/parser</font>:将字符串转换成AST,Babylon( 现在是@babel/parser ) 是 Babel 中使用的 JavaScript 解析器
解析过程分为两个阶段
- 语法分析:字符流 -> token流
- 词法分析:token流 -> AST
- @babel/parser
转换 transform
<font color=red>@babel/traverse</font>:主要用于遍历AST
- Babel接收解析得到的AST并通过 ( babel-traverse ) 对其进行 ( 深度优先遍历 )
- 在此遍历过程中对节点进行 ( 添加 )、( 更新 ) 及 ( 移除 ) 操作
- traverse:是遍历的意思
<font color=red>@babel/types</font>:主要用来操作AST,比如 ( 添加 )、( 更新 ) 及 ( 移除 ) 操作
- 除了手动替换,可以使用@babel/types更加房便快捷
- 相当于作用于 AST 的类 lodash 库
- @babel/traverse
- @babel/types
生成 generate
<font color=red>@babel/generator</font>:来将转换后的抽象语法树转化为Javascript 字符串
- 将经过转换的AST通过babel-generator再转换为js代码
- 过程及时深度遍历整个AST,然后构建转换后的代码字符串。
- @babel/generator
@babel/parser
babelParser.parse(code, [options]) ------------------------------------ 解析所有代码
babelParser.parseExpression(code, [options]) -------------------------- 解析单个表达式
参数:
- code:表示源码字符串
- options:配置对象,可选
- allowImportExportEverywhere:默认import和export声明只能出现在顶部,当此选项为true则可以出现在任何地方
- ...
@babel/traverse
因为 ( @babel/parser解析 ) 和 ( @babel/generator生成 ) 基本不会变化,所以重点是 ( @babel/traverse转换 )
import * as babylon from "babylon"; import traverse from "babel-traverse"; // 源码string const code = `function square(n) { return n * n; }`; // 解析 parse:string -> ast const ast = babylon.parse(code); // 转换 transform:ast -> modified ast traverse(ast, { enter(path) { if ( path.node.type === "Identifier" && path.node.name === "n" ) { path.node.name = "x"; // ---------------- 如果是标识符并且标识符的名字是n,就把n改为x } }
@babel/generator
import {parse} from '@babel/parser';
import generate from '@babel/generator';
const code = 'class Example {}';
const ast = parse(code);
const output = generate(ast, { /* options */ }, code);
babel转化代码案例
需求:将小写变量转换成大写
// 输入 const numberFive = 5; // 输出 const NUMBERFIVE = 5;
实现过程
安装 @babel/core ----------------------- babel核心模块 @babel/parser --------------------- 字符流 -> token流 -> AST @babel/traverse ------------------- AST -> modified AST @babel/generator ------------------ modified AST -> 字符流 npm install @babel/core @babel/parser @babel/traverse @babel/generator -S
代码
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;
// 源码字符串
const code = `
const nubmerFive = 5
`;
// 解析
let AST = parser.parse(code)
// 转换
traverse(AST, {
enter(path) {
console.log(path.node.type, 'path.node.type')
if (path.node.type === 'Identifier') { // 如果node类型是标识符,就将name转成大写形式
path.node.name = path.node.name.toUpperCase()
}
}
})
// 生成
const outputObj = generator(AST)
const outputStr = outputObj.code;
console.log(outputStr, 'outputStr')
资料
AST babel-AST相关工具 https://juejin.im/post/684490...
AST 从babel讲到AST https://juejin.im/post/684490...
AST 99%的人不了解的AST https://segmentfault.com/a/11...
AST 抽象语法树-图形 https://juejin.im/post/684490...
AST 具体细节:https://segmentfault.com/a/11...
AST https://cheogo.github.io/lear...
AST详细 https://www.codercto.com/a/88...
babel转换 https://juejin.im/post/684490...
babel转换案例 https://cloud.tencent.com/dev...
babel插件介绍 https://zhuanlan.zhihu.com/p/...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。