babel
- 访问者模式Visitor 对于某个对象或者一组对象,不同的访问者,产生的结果不同,执行操作也不同
- @babel/core Babel 的编译器,核心 API 都在这里面,比如常见的 transform、parse
- @babel/parser Babel 的解析器
- @babel/types 用于 AST 节点的 Lodash 式工具库, 它包含了构造、验证以及变换 AST 节点的方法,对编写处理 AST 逻辑非常有用
- @babel/traverse 用于对 AST 的遍历,维护了整棵树的状态,并且负责替换、移除和添加节点
- babel-types-api Babel 插件文档
- babeljs.io babel可视化编译器
# 安装依赖
npm install @babel/core @babel/types --save-dev
// babel核心库, 用来实现核心的转换引擎
const babel = require('@babel/core');
// let babelTypes = require('@babel/types');
export default function () {
const { types: babelTypes } = babel;
return {
name: "ast-transform", // not required
visitor: {
// babel内部会先把代码转成ast, 然后再进行遍历 (匹配type)
ArrowFunctionExpression: (path) => {
let node = path.node;
let id = path.parent.id;
let params = node.params;
// 创建一个body
const body = babelTypes.blockStatement([babelTypes.returnStatement(node.body)]);
// 生成一个函数
let functionExpression = babelTypes.functionExpression(id, params, body, false, false);
// 用新的函数替换老的函数
path.replaceWith(functionExpression);
},
}
};
}
测试
const arrowFuncCode = `const sum = (a,b) => a + b`;
const transformArrowFunctions = require('./transformArrowFunctions.js');
const arrowResult = babel.transform(arrowFuncCode, {
plugins: [transformArrowFunctions],
});
console.log(arrowResult.code);
/*
const sum = function sum(a, b) {
return a + b;
};
*/
网友评论