概念
- AST(Abstract Syntax Tree) 抽象语法树
- webpack和Lint等很多的工具和库的核心都是通过Abstract Syntax Tree抽象语法树这个概念来实现对代码的检查、分析等操作的。通过了解抽象语法树这个概念，你也可以随手编写类似的工具
用途
- 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
- 如JSLint、JSHint对代码错误或风格的检查，发现一些潜在的错误
- IDE的错误提示、格式化、高亮、自动补全等等
- 代码混淆压缩
- UglifyJS2等
- 优化变更代码，改变代码结构使达到想要的结构
- 代码打包工具webpack、rollup等等
- CommonJS、AMD、CMD、UMD等代码规范之间的转化
- CoffeeScript、TypeScript、JSX等转化为原生Javascript
抽象语法树定义
1.原理都是通过JavaScript Parser把代码转化为一颗抽象语法树（AST），这颗树定义了代码的结构，通过操纵这颗树，我们可以精准的定位到声明语句、赋值语句、运算语句等等，实现对代码的分析、优化、变更等操作
- 在计算机科学中，抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。
-
普通代码转成抽象语法树的样子
WX20180619-163315.png
javascript Parser
- JavaScript Parser，把js源码转化为抽象语法树的解析器
- 浏览器会把js源码通过解析器转为抽象语法树，再进一步转化为字节码或直接生成机器码。
- 一般来说每个js引擎都会有自己的抽象语法树格式，Chrome的v8引擎，firefox的SpiderMonkey引擎等等，MDN提供了详细SpiderMonkey AST format的详细说明，算是业界的标准。
常用的JavaScript Parser
- esprima
- traceur
- acorn
- shift
esprima
- 通过 esprima 把源码转化为AST
- 通过 estraverse 遍历并更新AST
- 通过 escodegen 将AST重新生成源码
- demo如下
let esprima = require('esprima');
let estraverse = require('estraverse');
let escodegen = require('escodegen');
let code = 'function ast(){}'
//将源码转成ast
let ast = esprima.parse(code);
//遍历ast树
estraverse.traverse(ast, {
enter(node) {
console.log('enter', node.type)
if(node.type == 'Identifier'){
node.name += '_enter';
}
},
leave(node) {
console.log('leave', node.type)
if(node.type == 'Identifier') {
node.name += '_leave'
}
}
})
//遍历过程中打印的结果如下
enter Program
enter FunctionDeclaration
enter Identifier
leave Identifier
enter BlockStatement
leave BlockStatement
leave FunctionDeclaration
leave Program
//将ast树从新生成源码
let result = escodegen.generate(ast);
console.log(result)
//function ast_enter_leave() {
//}
-
遍历ast树的过程分析
WX20180619-171137.png - 一般我们会用babel-core, babel-type实现代码转换的功能
实现转换的3大法宝
- https://astexplorer.net/ 通过该工具查看转换语法
- babel-core
- babel-types
转换箭头函数(babel-core, babel-types)
- 访问者模式Visitor 对于某个对象或者一组对象，不同的访问者，产生的结果不同，执行操作也不同
- babel-core
- babel-types
- Babel 插件手册
- demo 如下
//babel核心库，用来实现核心的转换引擎(将源码转成ast,如果要做具体的业务操作，babel是不管的)
let bable = require('babel-core');
//可以实现类型判断，生成AST零部件
let types = require('babel-types');
//把该箭头喊出成es5普通函数
const code = `const sum = (a,b) => a+b`;
/**
* //把上面的箭头函数想转成es5普通的函数，我们可以倒着推，就是转成该函数需要哪些节点
* let sum = function(a,b){ return a+b; }
*
*/
//这个访问者可以对特定的类型的节点进行处理
let visitor = {
//针对进入和离开都处理一次
// ArrowFunctionExpression:{
// entry(){},
// leave(){}
// }
//这种方式只会处理一次
ArrowFunctionExpression(path) {
let params = path.node.params;
//因为创建的函数body是blockStatement,所以创建一个
let blockStatement = types.blockStatement([
types.returnStatement(path.node.body)
], [])
//创建一个function表达式
let func = types.functionExpression(null, params, blockStatement, false, false)
//用新穿件的表达式替换原来的表达式
path.replaceWith(func)
}
}
let arrayPlugin = {visitor};
//babel内部先把代码转成AST,然后进行遍历，遍历的时候会匹配visitor里面的函数，如果匹配则进行处理
let result = bable.transform(code, {
plugins:[
arrayPlugin
]
})
console.log(result.code)
- 遍历ast树的过程
babel插件(预计算表达式)
- 预计算简单表达式的插件
const result = 1 + 2; => 转成const result = 3;
- 实现如下
//===========plugin.js
let code = `const result = 1000 * 60 * 60 *24`;
// let code = `const result = 1000*60`;
let types = require('babel-types');
let babel = require('babel-core');
//visit里面要放个函数，这个函数对应的就是要转换的节点类型，不知道的话，可以把要转换的代码贴到https://astexplorer.net/查看一下
var visitor = {
BinaryExpression(path){
//通过path.node可以拿到当前的节点
let node = path.node;
if(!isNaN(node.left.value) && !isNaN(node.right.value)){
let numericLiteral = types.numericLiteral(eval(node.left.value+node.operator+node.right.value));
path.replaceWith(numericLiteral);
//如果此表达式的父亲也是一个表达式的话，需要递归计算
if(path.parentPath.node.type === 'BinaryExpression'){
visitor.BinaryExpression.call(null,path.parentPath)
}
}
}
}
//let result = babel.transform(code, {
// plugins:[
// {visitor}
// ]
//})
//console.log(result.code)
module.exports = function(babel){
return {
visitor
}
}
//index.js===============
const babel = require('babel-core');
const result = babel.transform('const sum = 1+2+3',{
plugins:[
require('./plugin')
]
});
console.log(result.code);
webpack babel插件
- 实现按需加载(需求)
//lodash
import { flatten,concat } from "lodash"
//转为
import flatten from "lodash/flatten";
import concat from "lodash/flatten";
- babel配置
- transform-runtime Babel 默认只转换新的 JavaScript 语法，而不转换新的 API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译,启用插件 babel-plugin-transform-runtime 后，Babel 就会使用 babel-runtime 下的工具函数
- 配置
{
"presets":["react","stage-0","env"],
"plugins":[
["extract", {"library":"lodash"}],
["transform-runtime", {}]
]
}
- plugins和presets编译顺序是:首先plugins从左往右，然后是presets从右往左
- babel插件
let babel = require('babel-core');
let types = require('babel-types');
const visitor = {
ImportDeclaration:{
enter(path,ref={opts:{}}){
const specifiers = path.node.specifiers;
const source = path.node.source;
if(ref.opts.library == source.value && !types.isImportDefaultSpecifier(specifiers[0])){
const declarations = specifiers.map((specifier,index)=>{
return types.ImportDeclaration(
[types.importDefaultSpecifier(specifier.local)],
types.stringLiteral(`${source.value}/${specifier.local.name}`)
)
});
path.replaceWithMultiple(declarations);
}
}
}
}
module.exports = function(babel){
return {
visitor
}
}
