JS 语法树
最后更新于：2022-04-02 03:27:46
[TOC]
> [参考](https://mp.weixin.qq.com/s?__biz=MzI1NTcxOTQ1Nw==&mid=2247489675&idx=1&sn=1aca9a4c43076b76eb22caff8c9a0361&utm_source=tuicool&utm_medium=referral)
> [在线语法分析网站](https://astexplorer.net/)
>
## 概述
## AST 能做什么
* 语法检查、代码风格检查、格式化代码、语法高亮、错误提示、自动补全等
* 代码混淆压缩
* 优化变更代码，改变代码结构等
## 实例
### babel 插件 - 箭头函数转普通函数
方式一: 使用@babel/preset-env
```
const babel = require('@babel/core')
const code = `const fn = (a, b) => a + b`
// babel 有 transform 方法会帮我们自动遍历，使用相应的预设或者插件转换相应的代码
const r = babel.transform(code, {
presets: ['@babel/preset-env'],
})
console.log(r.code)
// 打印结果如下
// "use strict";
// var fn = function fn() { return a + b; };
```
方式二: 只是转换箭头函数
```
const babel = require('@babel/core')
const code = `const fn = (a, b) => a + b`
// babel 有 transform 方法会帮我们自动遍历，使用相应的预设或者插件转换相应的代码
const r = babel.transform(code, {
plugins: ['@babel/plugin-transform-arrow-functions'],
})
console.log(r.code)
// 打印结果如下
// const fn = function () { return a + b; };
```
## 编写自己的插件
### 通过AST 分析,比较两个语法的差别
> [在线语法分析网站](https://astexplorer.net/)
把箭头函数解析成普通函数
### AST 转换
就是把`ArrowFunctionExpression`，转为`FunctionExpression`
```
t.functionExpression(id, params, body, generator, async)
id: Identifier (default: null) id 可传递 null
params: Array (required) 函数参数，可以把之前的参数拿过来
body: BlockStatement (required) 函数体，接受一个 BlockStatement 我们需要生成一个
generator: boolean (default: false) 是否为 generator 函数，当然不是了
async: boolean (default: false) 是否为 async 函数，肯定不是了
t.blockStatement(body, directives)
```
';