我们做了什么（在转换中进入到 ExportDefault 中做对应的处理）:
//ExportDefault 到 Component构造器的转换
ExportDefaultDeclaration(path) {
//创建 CallExpression Component({})
function insertBeforeFn(path) {
const objectExpression = t.objectExpression(propertiesAST);
test = t.expressionStatement(
t.callExpression(//创建名为 Compontents 的调用表达式，参数为 objectExpression
t.identifier("Compontents"),[
objectExpression
] )
);
//最终得到的语法树
console.log("test",test)
}
if (path.node.type === "ExportDefaultDeclaration") {
if (path.node.declaration.properties) {
//提取属性并存储
propertiesAST = path.node.declaration.properties;
//创建 AST 包裹对象
insertBeforeFn(path);
}
//得到我们最终的转换结果
console.log(generate(test, {}, code).code);
对于 ExportDefault => Component 构造器转换还有一种转换思路 下面我们看一下：
[1] 第一种思路是先提取 ExportDefault 内部所有节点的 AST ，并做处理，然后创建Component构造器，插入提取处理后的 AST，得到最终的 AST
//propertiesAST 这个就是我们拿到的 AST，然后在对应的分支内做对应的处理 以下分别为 data，methods，props，其他的钩子同样处理即可
propertiesAST.map((item, index) => {
if (item.type === "ObjectProperty") {
//props 替换为 properties
if (item.key.name === "props") {
item.key.name = "properties";
}
} else if (item.type === "ObjectMethod") {
if (path.node.key.name === "mounted") {
path.node.key.name = "ready";
} else if (path.node.key.name === "created") {
path.node.key.name = "attached";
} else if (path.node.key.name === "destroyed") {
path.node.key.name = "detached";
} else if (path.node.type === "ThisExpression") {
if (path.parent.property.name === "$emit") {
path.parent.property.name = "triggerEvent";
}
} else {
void null;
}
}
} else if (path.node.key.name === "methods") {
path.traverse({
enter(path) {
if (path.node.type === "ThisExpression") {
if (path.parent.property.name === "$emit") {
path.parent.property.name = "triggerEvent";
}
}
}
})
}
else {
//...
console.log("node type", item.type);
}
});[2] 第二种思路呢，就是我们上面展示的这种，不过有一个关键的地方要注意一下：
//我把 ExportDefaultDeclaration 的处理放到最后来执行，拿到 AST 首先进行转换。然后在创建得到新的小程序组件JS部分的 AST 即可
