案例js文件
- 文件路径:src/router/a.js
- 文件内容:
export default {
fixed: [],
fluid: []
}
js解析器
- 使用@babel/core 把js 解析为jsonTree
const babelPath = '@babel/core'
const babel = require(babelPath);
function generatingAst (code) {
const ast = babel.parse(code);
return ast
}
const jsPath = 'src/router/a.js'
fs.readFile(jsPath, 'utf8', function(err, data) {
if (err) {
console.error(err);
return;
}
const ast = generatingAst(data)
});
- 循环ast
const traversePath = '@babel/traverse'
const traverse = require(traversePath).default;
function estraverseAst (ast) {
const templateAST = generatingTemplateAst('{a:1,()=>{}}');
traverse(ast, {
enter(path) {
if (path.node.type === 'ObjectProperty' && path.node.key.name === 'fixed') {
path.node.value.elements.push(templateAST, templateAST);
}
if (path.node.type === 'ObjectProperty' && path.node.key.name === 'fluid') {
path.node.value.elements.push(templateAST);
}
}
});
}
- 使用修改后的ast 生成code
const generatePath = '@babel/generator'
const generate = require(generatePath).default;
function generatingCode (ast) {
return generate(ast)
}
- 为了快速插入ast,创建ast模版
function generatingTemplateAst (code) {
const ast = generatingAst(`[${code}]`).program.body[0].expression?.elements[0];
return ast
}
- 如何格式不对,可进一步处理格式
const prettier = require("prettier");
const formattedCode = prettier.format(code, {
parser: "babel",
trailingComma: "es5",
tabWidth: 2,
semi: false,
printWidth: 300,
singleQuote: true,
bracketSpacing: false,
trailingComma: 'none'
});
- 写入修改后的文件
const fs = require('fs')
fs.writeFile('src/router/a.js', formattedCode, (err) => {
if (err) throw err;
});