let core = require('@babel/core');
let types = require('babel-types');
const sourceCode = `const sum = (a, b) => {
console.log(this);
return a+b
}`;
let babelTransformArrowFunction = {
visitor: {
// 属性就是节点类型
ArrowFunctionExpression(nodePath) {
let { node } = nodePath;
const thisBinding = hoistFunctionEnvironment(nodePath);
node.type = 'FunctionExpression';
},
},
};
function hoistFunctionEnvironment(fnPath) {
const thisEnv = fnPath.findParent((p) => { //找到父作用域
return (
(p.isFunction && p.isArrowFunctionExpression()) ||
p.isProgram() ||
p.isClassProperty({ static: false })
);
});
let thisPaths = getScopeInfo(fnPath); //找到当前箭头函数中，所有使用this的地方
let thisBinding = '_this';
if (thisPaths.length > 0) {
thisEnv.scope.push({ // 这句代码会生成 let _this = this
id: types.identifier(thisBinding),
init: types.thisExpression(),
});
thisPaths.forEach((thisChild) => {
let thisRef = types.identifier(thisBinding);
thisChild.replaceWith(thisRef);
});
}
}
function getScopeInfo(fnPath) {
let thisPaths = [];
fnPath.traverse({ // 遍历所有子节点，找到this语句
ThisExpression(expression) {
thisPaths.push(expression);
},
});
return thisPaths;
}
const targetCode = core.transform(sourceCode, {
plugins: [babelTransformArrowFunction],
});
console.log(targetCode.code);
实现一个简版babel插件transform-arrow-function
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- transform-lang 示例参考[https://github.com/tinper-acs/lang-de...
- 背景：当我们同时引入一个包中的两个方法，有两种形式 第一种形式 第二种形式 对比两种形式，我们可以看出： 第一种方...
- https://github.com/holidaypenguin/image-loader-progress这是...
