解读

面试官抛出这道题，并不是想让你手写 Babel，而是考察三件事：

1. 能否在 Grunt 体系里把 JSX 安全地转译成 ES5；
2. 能否把转译后的 AST 抽出来并序列化成“树”结构；
3. 能否用 Grunt 插件或任务链把上述两步串起来，最终吐出一个前端可渲染的 JSON，供 D3、ECharts 等可视化库直接消费。

国内一线团队（阿里、美团、滴滴）的基建面试里，“老工具 + 新场景” 是高频套路：Grunt 虽旧，但存量项目仍在跑；候选人若能在不推翻旧构建的前提下把 JSX 可视化需求无缝接入，就是加分项。

知识点

• grunt-babel 官方插件：@babel/preset-react 配置细节，sourceMap 开关对调试的影响；
• @babel/parser 与 @babel/traverse：如何只遍历 JSXElement、JSXText、JSXExpressionContainer 三类节点，避免把整棵 ESTree 全部序列化导致内存爆炸；
• Grunt 多任务机制：registerMultiTask 的 this.options()、this.files 数组写法，保证一个任务既能读 src 又能写 dest；
• Grunt 异步完成信号：this.async() 的调用时机，防止任务提前退出导致文件空洞；
• 可视化 JSON 协议：{ name, type, children, loc } 四元组即可满足 D3 树图要求，无需把 babel loc 全量透出；
• 国内 CI 场景：Grunt 跑在 GitLab-Runner 或 Jenkins 容器里，node_modules 缓存策略与 babel 插件二次安装耗时如何权衡；
• 性能红线：单文件 2 万行 JSX 时，遍历 + JSON.stringify 峰值内存 < 500 MB，否则会被 SRE 打回。

答案

1. 安装依赖
   npm i -D grunt grunt-babel @babel/preset-react @babel/parser @babel/traverse

2. Gruntfile.js 骨架

module.exports = function(grunt) {
  grunt.initConfig({
    babel: {
      jsx: {
        options: {
          presets: [['@babel/preset-react', { pragma: 'React.createElement' }]],
          sourceMaps: false
        },
        files: [{
          expand: true,
          cwd: 'src',
          src: '**/*.jsx',
          dest: 'lib',
          ext: '.js'
        }]
      }
    },
    jsx_ast: {
      src: 'src/**/*.jsx',
      dest: 'dist/jsxTree.json'
    }
  });

  grunt.loadNpmTasks('grunt-babel');

  // 自定义任务：解析 JSX 并生成可视化树
  grunt.registerMultiTask('jsx_ast', 'parse jsx to visual tree', function() {
    const path = require('path');
    const parser = require('@babel/parser');
    const traverse = require('@babel/traverse').default;
    const fs = require('fs');
    const done = this.async();          // **异步标记**

    const result = [];

    this.files.forEach(f => {
      f.src.forEach(file => {
        const code = grunt.file.read(file);
        const ast = parser.parse(code, {
          sourceType: 'module',
          plugins: ['jsx']
        });

        const root = { name: path.basename(file), type: 'File', children: [] };
        traverse(ast, {
          JSXElement(p) {
            const node = {
              name: p.node.openingElement.name.name,
              type: 'JSXElement',
              children: [],
              loc: p.node.loc.start
            };
            // 只挂到最近父 JSX 节点，简化树深
            let parent = p.findParent(p => p.isJSXElement());
            if (parent) {
              parent.node._vNode = parent.node._vNode || { children: [] };
              parent.node._vNode.children.push(node);
            } else {
              root.children.push(node);
            }
            p.node._vNode = node;
          }
        });
        result.push(root);
      });
    });

    grunt.file.write(this.data.dest, JSON.stringify(result, null, 2));
    grunt.log.ok('Visual JSX tree → ' + this.data.dest);
    done();
  });

  grunt.registerTask('default', ['babel', 'jsx_ast']);
};

3. 运行
   npx grunt
   输出文件 dist/jsxTree.json 即为可直接喂给前端树图组件的规范数据，字段干净、体积可控。

拓展思考

• 增量解析：src 目录下几千个 JSX 文件时，通过 grunt-newer 做 mtime 过滤，把解析耗时从 90 s 降到 12 s；
• 可视化升级：把 JSON 换成 dot 格式让 Graphviz 出矢量图，方便架构师做“组件依赖大图”评审；
• AST 缓存：在 .grunt 目录下序列化 babylon AST 的 md5 快照，二次启动直接读缓存，CI 场景下节省 30% 构建时长；
• 安全红线：若 JSX 里混有企业敏感字符串，在 traverse 阶段加字段脱敏函数，防止可视化 JSON 随构建产物泄露到公网；
• 未来迁移：团队若决定从 Grunt 迁到 Vite，可把同一套 babel 插件逻辑封装成 rollup 插件，实现“任务代码零废弃”，体现架构平滑演进能力。