AST

[Wscats]

调试网站

AST测试网站
babel插件手册

babel

const template = require('@babel/template').default;
const generate = require("@babel/generator").default;

const ast = template.ast(`
// JS
var a = 'abcd'
`);
ast.kind = 'let';
ast.declarations[0].init.value = 1234;
console.log(ast.declarations[0].init);

console.log(generate(ast).code);

这段代码通过AST把var a = 'abcd'转化为let b = 1234

babel-plugins

babel插件开发，plugin字段配合visitor筛选代码实现转化，转换的时候，是插件开始起作用的时候，babel给我们提供了一个visitor的规范，让我们进入到这个流程中，我们可以通过visitor来定义我们的访问逻辑

visitor支持很多类型，比如VariableDeclaration，FunctionDeclaration ，ImportDeclaration 等，具体可以从AST测试网站展开分析

const {
    transform
} = require("@babel/core");
module.exports = async (option, options) => {
    let {
        script,
        allScript,
        isExistScript,
        scriptLang,
        template,
        templateLang,
        templateComponentName,
        style,
        styleLang,
        isExistStyle
    } = option
    const result = await new Promise((resolve, reject) => {
        const defaultOption = {
            plugins: [
                require("@babel/plugin-proposal-class-properties"),
                {
                    visitor: {
                        ArrayExpression(path) {
                            console.log(path.node)
                        }
                    }
                }
            ],
            presets: [
                [
                    require("@babel/preset-react"),
                    {
                        "pragma": "h",
                    }
                ]
            ]
        }
        // comibine option
        const finalOptions = Object.assign({}, defaultOption, {
            ...options
        });
        transform(allScript, {
            ...finalOptions
        }, (err, result) => {
            if (err) {
                reject(err)
            } else {
                // console.log(result)
                resolve(result)
            }
        });
    })
    return result
}

访问者模式

可以在方法名用|来匹配多种不同的type，使用相同的处理函数

visitor: {
    "ClassExpression|VariableDeclaration"(path) {
        console.log(path.node.body)
    }
}

遍历

可以手动查找就不要遍历

path.node.params.forEach(function() {
      // ...
});

获取子节点的path

BinaryExpression(path) {
    path.get('left');
},
Program(path) {
    path.get('body.0');
}

获取父节点的path

findParent

获取对应的子节点的

path.find((path) => path.isObjectExpression());
path.find((path) => path.isReturnStatement()); //获取return的地方

babel-types

配合babel-types工具进行代码替换增加等

const t = require("babel-types");

用多节点替换单节点

ReturnStatement(path) {
  path.replaceWithMultiple([
    t.expressionStatement(t.stringLiteral("Is this the real life?")),
    t.expressionStatement(t.stringLiteral("Is this just fantasy?")),
    t.expressionStatement(t.stringLiteral("(Enjoy singing the rest of the song in your head)")),
  ]);
}

还可以替换代码，不过经过测试，它有局限性，官方文档也不建议使用

FunctionDeclaration(path) {
  path.replaceWithSourceString(`function add(a, b) {
    return a + b;
  }`);
}

技巧

利用visitor访问者模式获取函数片段，然后通过path.get(类型)一层一层定位到对应的子路径然后执行path.xxx改造代码片段，获取子属性可以先在AST测试网站先查找结果

visitor: {
    "ClassExpression"(path, { opts }) {
        // 筛选class myAbcAbc extends WeElement类
        if (path.node.superClass.name === 'WeElement' && path.get("body.body")) {
            console.log('---------------')
            path.get("body.body").forEach((ClassMethod) => {
                // 筛选render() {}函数
                if (ClassMethod.node.key.name === 'render') {
                    console.log(ClassMethod.type)
                    ClassMethod.remove()
                }
            })
        }
    }
}

loader里面获取文件的路径：

const filename = this.resourcePath;

踩过的坑

类里面的方法要使用 ClassMethod 匹配，不能使用 FunctionExpression 匹配。

参考网站

• 通过开发 Babel 插件理解抽象语法树（AST）