[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<LVal> (required) 函数参数，可以把之前的参数拿过来 body: BlockStatement (required) 函数体，接受一个 BlockStatement 我们需要生成一个 generator: boolean (default: false) 是否为 generator 函数，当然不是了 async: boolean (default: false) 是否为 async 函数，肯定不是了 t.blockStatement(body, directives) ```