前言
babel是javaScript编译器,主要用于将ECMAScript2015+版本的代码转化为具有兼容性的较低版本，从而让代码适用于各种环境。
它的早期代码从acorn项目中fork出来，后续提供了acorn不具备的一整套的代码解析，转换，生成的功能。
babel代码转换第一步是将源码转化成AST(Abstract Syntax Tree)。
本文将借助acorn初期的源码以及ESTree 规范标准,详细讲解其生成AST的工程细节。
功能分析
先举个代码转为ast的例子:
/* 测试whileStatement*/while(b !== 0){ if (a > b){ a = a - b; }else{ b = b - a; }}console.log(a)转化后的ast结构
实现思路
上图的整个树的生成都是由一次次词法，语法解析中递归出来的。一个完整的递归函数逻辑如下：
- 去除注释,空格,换行。
- 词法分析: 将源码中的字符转化为单词。即解析token，如while(b !== 0){将被识别为的[while,(,b,!==,0,),{]这7个单词。
- 语法分析：通过词法解析出来的单词token来获取statement节点的类型并解析，然后对其中可能含有的expression进行相应的语法解析。解析出其开始的start，结束的end，值value以及值的类型label。
- 索引移到下一位，开启新一轮的递归。以此循环直到将文件字符串读取完毕。
... while (tokType !== _eof) { const statement = parseStatement(); if (first) { first = false; if (isUseStrict(statement)) { setStrict(true); } } node.body.push(statement); } ... 功能实现
单个递归函数的实现的功能如下
去除注释,空格,换行
注释分两种:
/ /,或者 / * /的多行注释以及//的单行注释。
空格分为' ' t n r f
function skipSpace() { while (tokenPos < inputLen) { const ch = input.charAt(tokenPos); if (ch === '/') { if (input.charAt(tokenPos + 1) === '/') { tokenPos += 2; while (tokenPos < inputLen && !newline.test(input.charAt(tokenPos))) { tokenPos++; } } else if (input.charAt(tokenPos + 1) === '*') { const i = input.indexOf('*/', tokenPos + 2); if (i < 0) { raise(tokenPos - 2, 'Unterminated comment'); } tokenPos = i + 2; } else { ++tokenPos; } } else if (ch === '\n' || ch === '\t' || ch === " " || ch === "\r" || ch === "\f") { ++tokenPos; } else { break; } }}解析token
具体token有非常多，但是按类型分的话，可以分为以下6种：
- string字符串类型。以' " 开头，且以' "结尾。
- regexp正则类型。以/开头，且以/结尾
- word单词类型。关键字如break case catch continue debugger。保留关键字如implements interface let package private以及普通的变量名称。
- number数字类型。类型有：二进制，八进制，十进制和十六进制。其中0x或者0X开头的是十六进制。
- punctuation标点符号类型。如[ { ( , ; ? 等符号。
operator运算符类型。如+ - * % | & = 等符号。对于不同符号在一起解析的时候，会有不同的解析优先级。
- 优先级最高为10: - * % ／
- 优先级为9:+ -
- 优先级为8: >> >>> << <<<
- 优先级为7: > >= < <=
- 优先级为6: === == !== !===
- 优先级为5: &
- 优先级为4: ^
- 优先级为3: |
- 优先级为2: &&
- 优先级为1: ||
function readToken() { lastStart = tokStart; lastEnd = tokEnd; tokStart = tokenPos; const ch = input.charAt(tokenPos); if (tokenPos >= inputLen) { return finishToken(_eof); } if (ch === '\'' || ch === '"') { readString(ch); } else if (indentifierReg.test(ch)) { readWord(); } else if (digest.test(ch)) { readNumber(); } else if (puncChars.test(ch)) { tokenPos++; finishToken(puncTypes[ch]); } else if (operatorChar.test(ch)) { readOperator(ch) }}解析节点Statements
除了BlockStatement,其他statement是以;或者换行符结束。
每种statement都由自己不同的解析方式以及名称。一个statement可能含有0个或者多个expression。
如while类型的statement解析函数如下
function parseWhile() { const node = startNode(); next(); node.test = parseParenExpression(); node.body = parseBlock(); return finishNode(node, 'WhileStatement');}解析后的简单的json类型为
{ "type": "WhileStatement", "test": { "type": "AssignmentExpression", "operator": "=", "left": { "type": "Identifier", "name": "a" }, "right": { "type": "Identifier", "name": "b" } }, "body": { "type": "BlockStatement", "body": [] } }解析expression
这个模块个人认为是最核心的模块，对不同表达式进行解析。
最基本的表达式如：Identifier,Literal,FunctionExpression,ObjectExpression,ArrayExpression,NewExpression。
建立在基本表达式之上的如：a.b的MemberExpression,a()的CallExpression。
++a,a--之类的UpdateExpression。
!a，!!a之类的UnaryExpression。
a||b,a&&b的LogicalExpression，a-b之类的BinaryExpression。
a=b之类的AssignmentExpression。
a?b:c之类的ConditionalExpression。
上面这些复杂类型的解析执行顺序如下:
举个复杂的例子:
var a=!b++?c+1:d.e(f,g);解析之后的json格式如下
{ "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "a" }, "init": { "type": "ConditionalExpression", "test": { "type": "UnaryExpression", "operator": "!", "prefix": true, "argument": { "type": "UpdateExpression", "operator": "++", "prefix": false, "argument": { "type": "Identifier", "name": "b" } } }, "consequent": { "type": "BinaryExpression", "left": { "type": "Identifier", "name": "c" }, "operator": "+", "right": { "type": "Literal", "value": 1, "raw": "1" } }, "alternate": { "type": "CallExpression", "callee": { "type": "MemberExpression", "object": { "type": "Identifier", "name": "d" }, "property": { "type": "Identifier", "name": "e" }, "computed": false }, "arguments": [ { "type": "Identifier", "name": "f" }, { "type": "Identifier", "name": "g" } ] } } } ], "kind": "var" }代码实现
本人的简易版babel实现simple-babel
(完)