深入解析：find_code 插件 react_vite

find_code 插件 react_vite

const fs = require("fs");
const path = require("path");
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const generate = require("@babel/generator").default;
// 读取文件内容
const filePath = path.join(__dirname, "index.tsx");
const code = fs.readFileSync(filePath, "utf8");
// 解析代码生成 AST
const ast = parser.parse(code, {
sourceType: "module",
plugins: ["jsx"],
});
// 遍历 AST
// 遍历 AST
traverse(ast, {
JSXOpeningElement(path) {
const line = path.node.loc.start.line;
const pathAttribute = {
type: "JSXAttribute",
name: { type: "JSXIdentifier", name: "path"
},
value: {
type: "StringLiteral",
value: `${filePath
}:${line
}`,
},
};
// 检查是否已经存在 path 属性，如果不存在则添加
const existingPathAttribute = path.node.attributes.find((attr) =>
{
return (
attr.name &&
attr.name.type === "JSXIdentifier" &&
attr.name.name === "path"
);
});
if (!existingPathAttribute) {
path.node.attributes.push(pathAttribute);
}
},
});
// 生成新代码，设置 retainLines 为 true 避免生成不必要的转义序列
const { code: newCode
} = generate(ast, {
retainLines: true,
jsescOption: {
minimal: true,
},
});
// 写入文件
fs.writeFileSync(filePath, newCode, "utf8");
console.log("代码修改完成");

// module
import fs from "fs/promises";
import path from "path";
import parser from "@babel/parser";
import traverse from "@babel/traverse";
import generate from "@babel/generator";
// 定义处理文件的异步函数
async function processFile(filePath) {
try {
// 读取文件内容
const code = await fs.readFile(filePath, "utf8");
// 解析代码生成 AST
const ast = parser.parse(code, {
sourceType: "module",
plugins: ["jsx"],
});
// 遍历 AST
traverse.default(ast, {
JSXOpeningElement(path) {
const line = path?.node?.loc?.start?.line;
const pathAttribute = {
type: "JSXAttribute",
name: { type: "JSXIdentifier", name: "path"
},
value: {
type: "StringLiteral",
value: `${filePath
}:${line
}`,
},
};
// 检查是否已经存在 path 属性，如果不存在则添加
const existingPathAttribute = path.node.attributes.find((attr) =>
{
return (
attr?.name &&
attr?.name.type === "JSXIdentifier" &&
attr?.name.name === "path"
);
});
if (!existingPathAttribute) {
path.node.attributes.push(pathAttribute);
}
},
});
// 生成新代码，设置 retainLines 为 true 避免生成不必要的转义序列
const { code: newCode
} = generate.default(ast, {
retainLines: true,
jsescOption: {
minimal: true,
},
});
// 写入文件
await fs.writeFile(filePath, newCode, "utf8");
console.log("代码修改完成");
} catch (error) {
console.error("处理文件时出错:", error);
}
}
// 获取要处理的文件路径
const filePath = path.join(process.cwd(), "node/index.tsx");
// 调用处理函数
processFile(filePath);

代码修改完成效果

import React from "react";
const Test = () =>
{
return (
<div path="/Users/guojie/跳槽学习文档——速成/vite/node/index.tsx:4">我是根目录<div path="/Users/guojie/跳槽学习文档——速成/vite/node/index.tsx:6">我是子目录</div><span path="/Users/guojie/跳槽学习文档——速成/vite/node/index.tsx:7">我是孙目录</span></div>);};export default Test;