学习AST的代码笔记整理

Online AST Explorer

yarn start
# or
yarn demo1

• esprima: code -> ast
• estraverse: ast -> new ast (traverse and modify)
• escodegen: new ast -> code

yarn demo2

Ref:　Babel Documentation

• A preset item is a set of plugins.
• The @babel/preset-env includes @babel/plugin-transform-arrow-functions.

// .babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": []
}

# arrow function
yarn demo3-1
# import partly
yarn demo3-2

Ref：@babel/types Documentation

// input
const fn = (a, b) => { return a + b; };
const fn = (a, b) => a + b;
// output
const fn = function (a, b) { return a + b; };

// input
import { Button, Icon } from 'vant';
// output
import Button from "vant/lib/Button";
import Icon from "vant/lib/Icon";

yarn demo4

Babylon is a JavaScript parser used in Babel.

• Use babylon to parse code rather than @babel/core.
• Use @babel/traverse and @babel/generator in @babel/core.