共计 8694 个字符，预计需要花费 22 分钟才能阅读完成。
AST 形象语法树
why
支流我的项目插件的用处: javascript 转译、代码压缩、css 预处理、eslint、prettier 等都建设在 AST 的根底上。
what
according to the grammar of a programming language, each AST node corresponds to an item of a source code.(依据编程语言的语法，每个 AST 节点对应一个源代码项。)
demo
链接地址：astexplorer.net
AST 解析工具
js 语法
function square(n) {return n * n;}
ast 语法树
| // Parser acorn-8.0.1 | |
| { | |
| "type": "Program", | |
| "start": 0, | |
| "end": 38, | |
| "body": [ | |
| { | |
| "type": "FunctionDeclaration", | |
| "start": 0, | |
| "end": 38, | |
| "id": { | |
| "type": "Identifier", | |
| "start": 9, | |
| "end": 15, | |
| "name": "square" | |
| }, | |
| "expression": false, | |
| "generator": false, | |
| "async": false, | |
| "params": [ | |
| { | |
| "type": "Identifier", | |
| "start": 16, | |
| "end": 17, | |
| "name": "n" | |
| } | |
| ], | |
| "body": { | |
| "type": "BlockStatement", | |
| "start": 19, | |
| "end": 38, | |
| "body": [ | |
| { | |
| "type": "ReturnStatement", | |
| "start": 23, | |
| "end": 36, | |
| "argument": { | |
| "type": "BinaryExpression", | |
| "start": 30, | |
| "end": 35, | |
| "left": { | |
| "type": "Identifier", | |
| "start": 30, | |
| "end": 31, | |
| "name": "n" | |
| }, | |
| "operator": "*", | |
| "right": { | |
| "type": "Identifier", | |
| "start": 34, | |
| "end": 35, | |
| "name": "n" | |
| } | |
| } | |
| } | |
| ] | |
| } | |
| } | |
| ], | |
| "sourceType": "module" | |
| } |
从纯文本中失去 AST(通过编译器)
- 词法剖析
scanner。它读取咱们的代码，而后把他们依照预约的规定合并成一个个的标识（tokens）. 同时，它会移除空白符，正文等。最初，整个代码将被宰割进一个 tokens 列表（或者说一维数组）。当词法剖析源代码的时候，它会一个一个字母的读取代码。当它遇到空格，操作符，或者特殊符号的时候，它会认为一个会话曾经实现了。
- 语法解析，也叫解析器
它将词法剖析进去的数组转化成树形的表达形式。同时验证语法，语法错误，抛出语法错误。
当生成树的时候，解析器会删除一些没必要的标识 tokens（比方不残缺的括号），因而 AST 不是 100% 与源码匹配，但咱们曾经可能晓得如何解决了。题外话，解析器 100% 笼罩所有代码构造生成树叫做 CST（具体语法树）
更多编译器常识
the-super-tiny-compiler- 仓库地址
将 Lisp 转化为 C 语言
LangSandbox- 仓库地址
发明本人的语言，并将它编译成 C 语言或者机器语言，最初运行它。
第三方库生成 AST
重点介绍 Babylon
Babylon
Babylon is a JavaScript parser used in Babel.Support for JSX, Flow, Typescript.
babel
babel 是一个 javascript 编译器。宏观来说，它分为 3 个阶段运行代码：解析（parsing），转译（transforming），生成（generation）。咱们能够给 babel 一些 javascript 代码，它批改代码而后生成新的代码返回。过程即创立 AST，遍历树，批改 tokens，最初从 AST 中生成最新的代码。
babel 解析生成
1、应用 babylon 解析代码生成语法树
| import * as babylon from "babylon"; | |
| const code = ` | |
| const abc = 5; | |
| `; | |
| const ast = babylon.parse(code); |
生成树后果:
| { | |
| "type": "File", | |
| "start": 0, | |
| "end": 18, | |
| "loc": { | |
| "start": { | |
| "line": 1, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 0 | |
| } | |
| }, | |
| "program": { | |
| "type": "Program", | |
| "start": 0, | |
| "end": 18, | |
| "loc": { | |
| "start": { | |
| "line": 1, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 0 | |
| } | |
| }, | |
| "sourceType": "script", | |
| "body": [ | |
| { | |
| "type": "VariableDeclaration", | |
| "start": 3, | |
| "end": 17, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 2 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 16 | |
| } | |
| }, | |
| "declarations": [ | |
| { | |
| "type": "VariableDeclarator", | |
| "start": 9, | |
| "end": 16, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 15 | |
| } | |
| }, | |
| "id": { | |
| "type": "Identifier", | |
| "start": 9, | |
| "end": 12, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 11 | |
| }, | |
| "identifierName": "abc" | |
| }, | |
| "name": "abc" | |
| }, | |
| "init": { | |
| "type": "NumericLiteral", | |
| "start": 15, | |
| "end": 16, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 14 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 15 | |
| } | |
| }, | |
| "extra": { | |
| "rawValue": 5, | |
| "raw": "5" | |
| }, | |
| "value": 5 | |
| } | |
| } | |
| ], | |
| "kind": "const" | |
| } | |
| ], | |
| "directives": []}, | |
| "comments": [], | |
| "tokens": [ | |
| { | |
| "type": { | |
| "label": "const", | |
| "keyword": "const", | |
| "beforeExpr": false, | |
| "startsExpr": false, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": false, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null, | |
| "updateContext": null | |
| }, | |
| "value": "const", | |
| "start": 3, | |
| "end": 8, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 2 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 7 | |
| } | |
| } | |
| }, | |
| { | |
| "type": { | |
| "label": "name", | |
| "beforeExpr": false, | |
| "startsExpr": true, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": false, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null | |
| }, | |
| "value": "abc", | |
| "start": 9, | |
| "end": 12, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 11 | |
| } | |
| } | |
| }, | |
| { | |
| "type": { | |
| "label": "=", | |
| "beforeExpr": true, | |
| "startsExpr": false, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": true, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null, | |
| "updateContext": null | |
| }, | |
| "value": "=", | |
| "start": 13, | |
| "end": 14, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 12 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 13 | |
| } | |
| } | |
| }, | |
| { | |
| "type": { | |
| "label": "num", | |
| "beforeExpr": false, | |
| "startsExpr": true, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": false, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null, | |
| "updateContext": null | |
| }, | |
| "value": 5, | |
| "start": 15, | |
| "end": 16, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 14 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 15 | |
| } | |
| } | |
| }, | |
| { | |
| "type": { | |
| "label": ";", | |
| "beforeExpr": true, | |
| "startsExpr": false, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": false, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null, | |
| "updateContext": null | |
| }, | |
| "start": 16, | |
| "end": 17, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 15 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 16 | |
| } | |
| } | |
| }, | |
| { | |
| "type": { | |
| "label": "eof", | |
| "beforeExpr": false, | |
| "startsExpr": false, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": false, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null, | |
| "updateContext": null | |
| }, | |
| "start": 18, | |
| "end": 18, | |
| "loc": { | |
| "start": { | |
| "line": 3, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 0 | |
| } | |
| } | |
| } | |
| ] | |
| } |
2、应用 babel 的转换器 transforming 语法树语法
| import traverse from "babel-traverse"; | |
| traverse(ast, {enter(path) {if (path.node.type === "Identifier") { | |
| path.node.name = path.node.name | |
| .split("") | |
| .reverse() | |
| .join(""); | |
| } | |
| } | |
| }); |
| { | |
| "type": "File", | |
| "start": 0, | |
| "end": 18, | |
| "loc": { | |
| "start": { | |
| "line": 1, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 0 | |
| } | |
| }, | |
| "program": { | |
| "type": "Program", | |
| "start": 0, | |
| "end": 18, | |
| "loc": { | |
| "start": { | |
| "line": 1, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 0 | |
| } | |
| }, | |
| "sourceType": "script", | |
| "body": [ | |
| { | |
| "type": "VariableDeclaration", | |
| "start": 3, | |
| "end": 17, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 2 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 16 | |
| } | |
| }, | |
| "declarations": [ | |
| { | |
| "type": "VariableDeclarator", | |
| "start": 9, | |
| "end": 16, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 15 | |
| } | |
| }, | |
| "id": { | |
| "type": "Identifier", | |
| "start": 9, | |
| "end": 12, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 11 | |
| }, | |
| "identifierName": "abc" | |
| }, | |
| "name": "cba" | |
| }, | |
| "init": { | |
| "type": "NumericLiteral", | |
| "start": 15, | |
| "end": 16, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 14 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 15 | |
| } | |
| }, | |
| "extra": { | |
| "rawValue": 5, | |
| "raw": "5" | |
| }, | |
| "value": 5 | |
| } | |
| } | |
| ], | |
| "kind": "const" | |
| } | |
| ], | |
| "directives": []}, | |
| "comments": [], | |
| "tokens": [ | |
| { | |
| "type": { | |
| "label": "const", | |
| "keyword": "const", | |
| "beforeExpr": false, | |
| "startsExpr": false, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": false, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null, | |
| "updateContext": null | |
| }, | |
| "value": "const", | |
| "start": 3, | |
| "end": 8, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 2 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 7 | |
| } | |
| } | |
| }, | |
| { | |
| "type": { | |
| "label": "name", | |
| "beforeExpr": false, | |
| "startsExpr": true, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": false, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null | |
| }, | |
| "value": "abc", | |
| "start": 9, | |
| "end": 12, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 11 | |
| } | |
| } | |
| }, | |
| { | |
| "type": { | |
| "label": "=", | |
| "beforeExpr": true, | |
| "startsExpr": false, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": true, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null, | |
| "updateContext": null | |
| }, | |
| "value": "=", | |
| "start": 13, | |
| "end": 14, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 12 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 13 | |
| } | |
| } | |
| }, | |
| { | |
| "type": { | |
| "label": "num", | |
| "beforeExpr": false, | |
| "startsExpr": true, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": false, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null, | |
| "updateContext": null | |
| }, | |
| "value": 5, | |
| "start": 15, | |
| "end": 16, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 14 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 15 | |
| } | |
| } | |
| }, | |
| { | |
| "type": { | |
| "label": ";", | |
| "beforeExpr": true, | |
| "startsExpr": false, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": false, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null, | |
| "updateContext": null | |
| }, | |
| "start": 16, | |
| "end": 17, | |
| "loc": { | |
| "start": { | |
| "line": 2, | |
| "column": 15 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 16 | |
| } | |
| } | |
| }, | |
| { | |
| "type": { | |
| "label": "eof", | |
| "beforeExpr": false, | |
| "startsExpr": false, | |
| "rightAssociative": false, | |
| "isLoop": false, | |
| "isAssign": false, | |
| "prefix": false, | |
| "postfix": false, | |
| "binop": null, | |
| "updateContext": null | |
| }, | |
| "start": 18, | |
| "end": 18, | |
| "loc": { | |
| "start": { | |
| "line": 3, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 0 | |
| } | |
| } | |
| } | |
| ] | |
| } |
3、应用 babel 的生成器 generator 代码
| import generate from "@babel/generator"; | |
| const newCode = generate(ast).code; | |
| // newCode => const cba = 5; |
babel 插件制作（babel-plugins）
在上述步骤中，第一步（解析）和第三步（生成）有 babel 解决。
当开发 babel-plugin 插件的时候，咱们只须要形容转化你的 AST 节点的 ”visitors” 就能够了。
| // my-babel-plugin.js | |
| module.exports = function() { | |
| return { | |
| visitor: {Identifier(path) { | |
| const name = path.node.name; | |
| console.log(name); | |
| path.node.name = name | |
| .split("") | |
| .reverse() | |
| .join(""); | |
| } | |
| } | |
| }; | |
| }; | |
| // 在 babel.config.js 中注册插件，重启我的项目能力失效 | |
| // plugins: ["./src/plugins/mybabelplugin.js"] |
学习 Babel 插件制作 -Babel-handbook
中文插件手册
主动代码重构工具，神器 JSCodeshift
例如说你想要替换掉所有的老掉牙的匿名函数, 把他们变成 Lambda 表达式（箭头函数）。
| // transform | |
| load().then(function(response)) {return response.data;} | |
| // to | |
| load().then(response => response.data) |
上述操作代码编辑器可能没方法这么做，因为这并不是简略的查找替换操作。这时候 jscodeshift 就能够应用了。
如果你想创立主动把你的代码从旧的框架迁徙到新的框架，这就是一种很 nice 的形式。
jscodeshift
jscodeshift 是一个工具包，用于在多个 JavaScript 或 TypeScript 文件上运行 codemods。
react-codemod
This repository contains a collection of codemod scripts for use with JSCodeshift that help update React APIs.
此存储库蕴含一组 codemod 脚本，用于 jscodeshift，用于更新 React api。
Prettier
| // transform | |
| foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis()),isThereSeriouselyAnotherOne()); | |
| // to | |
| foo {reallyLongArg(), | |
| omgSoManyParameters(), | |
| IShouldRefactorThis(), | |
| isThereSeriouselyAnotherOne()}; | |
| // Prettier 格式化咱们的代码。它调整长句，整顿空格，括号等。 |
《A prettier printer》
Finally
js2flowchart 在线转化预览地址
js2flowchart 仓库地址
它将 js 代码转化生成 svg 流程图
这是一个很好的例子，因为它向你展示了你，当你领有 AST 时，能够做任何你想要做的事。把 AST 转回成字符串代码并不是必要的，你能够通过它画一个流程图，或者其它你想要的货色。
js2flowchart 应用场景是什么呢？通过流程图，你能够解释你的代码，或者给你代码写文档；通过可视化的解释学习其他人的代码；通过简略的 js 语法，为每个处理过程简略的形容创立流程图。
你也能够在代码中应用它，或者通过 CLI，你只须要指向你想生成 SVG 的文件就行。而且，还有 VS Code 插件（链接在我的项目 readme 中）
首先，解析代码成 AST，而后，咱们遍历 AST 并且生成另一颗树，我称之为工作流树。它删除很多不重要的额 tokens，然而将要害块放在一起，如函数、循环、条件等。再之后，咱们遍历工作流树并且创立形态树。每个形态树的节点蕴含可视化类型、地位、在树中的连贯等信息。最初一步，咱们遍历所有的形态，生成对应的 SVG，合并所有的 SVG 到一个文件中.
后续会继续更新，学习中。。。
