面试题：JavaScript中Babel插件原理与应用

Babel插件核心方法：
- 一个Babel插件本质上是一个函数，该函数接受babel对象作为参数，并返回一个包含visitor属性的对象。visitor对象包含用于访问不同类型AST节点的方法。
- 对于这个需求，主要会用到FunctionDeclaration和FunctionExpression节点的访问方法，因为它们包含函数形参信息。
遍历和修改AST节点思路：
- 遍历：
  - 在visitor对象中定义FunctionDeclaration和FunctionExpression的访问器。例如：

export default function (babel) {
    const { types: t } = babel;
    return {
        visitor: {
            FunctionDeclaration(path) {
                // 处理函数声明的形参
            },
            FunctionExpression(path) {
                // 处理函数表达式的形参
            }
        }
    };
}

修改：
- 对于每个函数节点（FunctionDeclaration或FunctionExpression），通过path.node.params获取形参列表。
- 遍历形参列表，对于每个形参节点（通常是Identifier类型），创建一个新的Identifier节点，新节点的名称为原名称前加上prefix_。
- 使用path.replaceWith方法替换原形参节点为新创建的节点。例如：

export default function (babel) {
    const { types: t } = babel;
    return {
        visitor: {
            FunctionDeclaration(path) {
                const newParams = path.node.params.map(param => {
                    if (t.isIdentifier(param)) {
                        return t.identifier('prefix_' + param.name);
                    }
                    return param;
                });
                path.node.params = newParams;
            },
            FunctionExpression(path) {
                const newParams = path.node.params.map(param => {
                    if (t.isIdentifier(param)) {
                        return t.identifier('prefix_' + param.name);
                    }
                    return param;
                });
                path.node.params = newParams;
            }
        }
    };
}

这样就可以实现将所有函数中的形参名前加上prefix_前缀的功能。在实际应用中，可能还需要考虑更多的边界情况，比如解构赋值形式的形参等。

面试题：JavaScript中Babel插件原理与应用

知识考点

面试题答案