我刚接触babel，并且尝试使用visitor模式执行一些AST遍历和转换。我要转换的JS代码是：
.data(data)
.attr("height", function (d) {
return height - y(Number(d.Speed));
});
此代码的AST看起来像这样（JSON）
{
"type": "File",
"start": 0,
"end": 106,
"loc": {
"start": {
"line": 1,
"column": 0
},
"end": {
"line": 8,
"column": 0
}
},
"errors": [],
"program": {
"type": "Program",
"start": 0,
"end": 106,
"loc": {
"start": {
"line": 1,
"column": 0
},
"end": {
"line": 8,
"column": 0
}
},
"sourceType": "module",
"interpreter": null,
"body": [
{
"type": "ExpressionStatement",
"start": 2,
"end": 105,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 7,
"column": 3
}
},
"expression": {
"type": "CallExpression",
"start": 2,
"end": 104,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 7,
"column": 2
}
},
"callee": {
"type": "MemberExpression",
"start": 2,
"end": 40,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 5,
"column": 5
}
},
"object": {
"type": "CallExpression",
"start": 2,
"end": 34,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 4,
"column": 11
}
},
"callee": {
"type": "MemberExpression",
"start": 2,
"end": 28,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 4,
"column": 5
}
},
"object": {
"type": "CallExpression",
"start": 2,
"end": 22,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 3,
"column": 20
}
},
"callee": {
"type": "MemberExpression",
"start": 2,
"end": 15,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 3,
"column": 13
}
},
"object": {
"type": "Identifier",
"start": 2,
"end": 5,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 3,
"column": 3
},
"identifierName": "svg"
},
"name": "svg"
},
"property": {
"type": "Identifier",
"start": 6,
"end": 15,
"loc": {
"start": {
"line": 3,
"column": 4
},
"end": {
"line": 3,
"column": 13
},
"identifierName": "selectAll"
},
"name": "selectAll"
},
"computed": false
},
"arguments": [
{
"type": "StringLiteral",
"start": 16,
"end": 21,
"loc": {
"start": {
"line": 3,
"column": 14
},
"end": {
"line": 3,
"column": 19
}
},
"extra": {
"rawValue": "bar",
"raw": "\"bar\""
},
"value": "bar"
}
]
},
"property": {
"type": "Identifier",
"start": 24,
"end": 28,
"loc": {
"start": {
"line": 4,
"column": 1
},
"end": {
"line": 4,
"column": 5
},
"identifierName": "data"
},
"name": "data"
},
"computed": false
},
"arguments": [
{
"type": "Identifier",
"start": 29,
"end": 33,
"loc": {
"start": {
"line": 4,
"column": 6
},
"end": {
"line": 4,
"column": 10
},
"identifierName": "data"
},
"name": "data"
}
]
},
"property": {
"type": "Identifier",
"start": 36,
"end": 40,
"loc": {
"start": {
"line": 5,
"column": 1
},
"end": {
"line": 5,
"column": 5
},
"identifierName": "attr"
},
"name": "attr"
},
"computed": false
},
"arguments": [
{
"type": "StringLiteral",
"start": 41,
"end": 49,
"loc": {
"start": {
"line": 5,
"column": 6
},
"end": {
"line": 5,
"column": 14
}
},
"extra": {
"rawValue": "height",
"raw": "\"height\""
},
"value": "height"
},
{
"type": "FunctionExpression",
"start": 51,
"end": 103,
"loc": {
"start": {
"line": 5,
"column": 16
},
"end": {
"line": 7,
"column": 1
}
},
"id": null,
"generator": false,
"async": false,
"params": [
{
"type": "Identifier",
"start": 61,
"end": 62,
"loc": {
"start": {
"line": 5,
"column": 26
},
"end": {
"line": 5,
"column": 27
},
"identifierName": "d"
},
"name": "d"
}
],
"body": {
"type": "BlockStatement",
"start": 64,
"end": 103,
"loc": {
"start": {
"line": 5,
"column": 29
},
"end": {
"line": 7,
"column": 1
}
},
"body": [
{
"type": "ReturnStatement",
"start": 66,
"end": 101,
"loc": {
"start": {
"line": 6,
"column": 0
},
"end": {
"line": 6,
"column": 35
}
},
"argument": {
"type": "BinaryExpression",
"start": 73,
"end": 100,
"loc": {
"start": {
"line": 6,
"column": 7
},
"end": {
"line": 6,
"column": 34
}
},
"left": {
"type": "Identifier",
"start": 73,
"end": 79,
"loc": {
"start": {
"line": 6,
"column": 7
},
"end": {
"line": 6,
"column": 13
},
"identifierName": "height"
},
"name": "height"
},
"operator": "-",
"right": {
"type": "CallExpression",
"start": 82,
"end": 100,
"loc": {
"start": {
"line": 6,
"column": 16
},
"end": {
"line": 6,
"column": 34
}
},
"callee": {
"type": "Identifier",
"start": 82,
"end": 83,
"loc": {
"start": {
"line": 6,
"column": 16
},
"end": {
"line": 6,
"column": 17
},
"identifierName": "y"
},
"name": "y"
},
"arguments": [
{
"type": "CallExpression",
"start": 84,
"end": 99,
"loc": {
"start": {
"line": 6,
"column": 18
},
"end": {
"line": 6,
"column": 33
}
},
"callee": {
"type": "Identifier",
"start": 84,
"end": 90,
"loc": {
"start": {
"line": 6,
"column": 18
},
"end": {
"line": 6,
"column": 24
},
"identifierName": "Number"
},
"name": "Number"
},
"arguments": [
{
"type": "MemberExpression",
"start": 91,
"end": 98,
"loc": {
"start": {
"line": 6,
"column": 25
},
"end": {
"line": 6,
"column": 32
}
},
"object": {
"type": "Identifier",
"start": 91,
"end": 92,
"loc": {
"start": {
"line": 6,
"column": 25
},
"end": {
"line": 6,
"column": 26
},
"identifierName": "d"
},
"name": "d"
},
"property": {
"type": "Identifier",
"start": 93,
"end": 98,
"loc": {
"start": {
"line": 6,
"column": 27
},
"end": {
"line": 6,
"column": 32
},
"identifierName": "Speed"
},
"name": "Speed"
},
"computed": false
}
]
}
]
}
}
}
],
"directives": []
}
}
]
}
}
],
"directives": []
},
"comments": []
}
我目前正在查找所有调用表达式，以识别.attr（）调用，第一个arg是“ height”，我可以很容易地找到它。我正在尝试在调用表达式之后但在“;”之前插入以下代码我这样创建的.on(‘mouseover’, tip.show)
export default function (babel) {
const { types: t } = babel;
return {
name: "ast-transform", // not required
visitor: {
CallExpression :{
enter(path){
if(path.node.callee.type ==="MemberExpression"){
if (path.node.callee.property.name == 'attr'){
if(path.node.arguments[0].value =='height'){
console.log(path.node.arguments[1].body)
path.insertAfter(t.callExpression(
t.memberExpression(t.identifier(''), t.identifier('on')),
[t.stringLiteral('mouseover'), t.memberExpression(t.identifier('tip'), t.identifier('show'))]));
}
}
//path.node.callee.property.name =path.node.callee.property.name.split('').reverse().join('');
}
},
}
}
};
}
基本上我想从中转换代码
.data(data)
.attr("height", function (d) {
return height - y(Number(d.Speed));
});
收件人
.data(data)
.attr("height", function (d) {
return height - y(Number(d.Speed));
})
.on('mouseover', tip.show);
但是，代码是在整个表达式之后添加的，这不是我想要的。我无法弄清楚自己在做什么错，因此需要有关如何处理的帮助和建议。如果有人能向我提供关于如何使用Babel执行复杂的JS代码转换的非常好的教程，我也将不胜感激（我已经看过大多数反向标识符示例）