[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) ```