前端 AST 抽象语法树实战：用 Babel/SWC 编写自定义代码转换器

1
module.exports = function autoTrackPlugin({ types: t }) {
2
  return {
3
    visitor: {
4
      JSXOpeningElement(path, state) {
5
        const attrs = path.node.attributes;
6
        const tagName = path.node.name.name;
7

8
        // 只处理 <button>，且已经有 onClick 的情况
9
        if (tagName !== 'button') return;
10
        const onClick = attrs.find(a => t.isJSXAttribute(a) && a.name.name === 'onClick');
11
        if (!onClick || !t.isJSXExpressionContainer(onClick.value)) return;
12

13
        // 提取按钮的 label（如果存在 type="submit" 之类的，用 name 代替）
14
        const labelAttr = attrs.find(a => t.isJSXAttribute(a) && a.name.name === 'aria-label');
15
        const label = labelAttr ? labelAttr.value.value : 'unknown';
16

17
        // 构造 track() 调用
18
        const trackCall = t.callExpression(
19
          t.identifier('track'),
20
          [
21
            t.stringLiteral('button-click'),
22
            t.objectExpression([
23
              t.objectProperty(t.identifier('label'), t.stringLiteral(label)),
24
            ]),
25
          ],
26
        );
27

28
        // 把原始 onClick 包一层：原 onClick + track
29
        const originalHandler = onClick.value.expression;
30
        const wrapped = t.arrowFunctionExpression(
31
          [],
32
          t.blockStatement([
33
            t.expressionStatement(originalHandler),
34
            t.expressionStatement(trackCall),
35
          ]),
36
        );
37

38
        onClick.value = t.jsxExpressionContainer(wrapped);
39
      },
40
    },
41
  };
42
};

1
module.exports = function onDemandPlugin({ types: t }) {
2
  return {
3
    visitor: {
4
      ImportDeclaration(path, state) {
5
        const source = path.node.source.value;
6
        // 只处理来自 'my-ui' 的导入
7
        if (source !== 'my-ui') return;
8

9
        const specifiers = path.node.specifiers;
10
        const newImports = specifiers
11
          .filter(s => t.isImportSpecifier(s))
12
          .map(s => {
13
            const importedName = s.imported.name;
14
            const localName = s.local.name;
15
            return t.importDeclaration(
16
              [t.importDefaultSpecifier(t.identifier(localName))],
17
              t.stringLiteral(`my-ui/${importedName}`),
18
            );
19
          });
20

21
        path.replaceWithMultiple(newImports);
22
      },
23
    },
24
  };
25
};

1
const fs = require('fs');
2
const path = require('path');
3

4
module.exports = function i18nExtractPlugin({ types: t }) {
5
  const messages = {};
6
  let counter = 0;
7

8
  return {
9
    visitor: {
10
      StringLiteral(p, state) {
11
        // 跳过 import/export 中的模块路径
12
        if (p.parent.type === 'ImportDeclaration' || p.parent.type === 'ExportNamedDeclaration') return;
13
        // 跳过 <div title="..."> 里的字符串（如果只想做 UI 文案）
14
        if (p.parent.type === 'JSXAttribute') return;
15
        // 跳过对象 key
16
        if (p.parent.type === 'ObjectProperty' && p.parent.key === p.node) return;
17

18
        const value = p.node.value;
19
        // 只处理包含中文的字符串
20
        if (!/[\u4e00-\u9fa5]/.test(value)) return;
21

22
        // 生成 key（用文件路径 + 行号 + 序号）
23
        const filename = state.filename || 'unknown';
24
        const key = `${path.basename(filename, path.extname(filename))}#${p.node.loc.start.line}#${counter++}`;
25
        messages[key] = value;
26

27
        // 替换为 i18n.t(key)
28
        p.replaceWith(t.callExpression(t.identifier('i18n.t'), [t.stringLiteral(key)]));
29
      },
30
    },
31
    post() {
32
      // 所有文件处理完后输出映射
33
      const outPath = path.join(process.cwd(), 'i18n-messages.json');
34
      let existing = {};
35
      if (fs.existsSync(outPath)) {
36
        try { existing = JSON.parse(fs.readFileSync(outPath, 'utf8')); } catch {}
37
      }
38
      fs.writeFileSync(outPath, JSON.stringify({ ...existing, ...messages }, null, 2));
39
    },
40
  };
41
};

1
module.exports = function legacyDecoratorPlugin({ types: t }) {
2
  return {
3
    visitor: {
4
      ClassDeclaration(path) {
5
        const decorators = path.node.decorators;
6
        if (!decorators || decorators.length === 0) return;
7

8
        // 装饰器降级的核心思路：把类包装成函数，
9
        // 然后用 Object.defineProperty 注入到原型上
10
        const className = path.node.id.name;
11
        const classBody = path.node.body.body;
12

13
        decorators.forEach((dec) => {
14
          if (!t.isDecorator(dec)) return;
15
          const decoratorExpr = dec.expression;
16
          if (!t.isCallExpression(decoratorExpr)) return;
17

18
          const decoratorFn = decoratorExpr.callee;
19
          const decoratorArgs = decoratorExpr.arguments;
20

21
          // 处理方法装饰器：@Log('info') foo() {}
22
          classBody.forEach((member) => {
23
            if (!t.isClassMethod(member) && !t.isClassProperty(member)) return;
24
            if (!member.decorators || member.decorators.length === 0) return;
25

26
            const methodDecorator = member.decorators[0];
27
            if (!t.isDecorator(methodDecorator)) return;
28

29
            const methodDecExpr = methodDecorator.expression;
30
            if (!t.isCallExpression(methodDecExpr)) return;
31

32
            const targetKey = t.stringLiteral(member.key.name);
33
            const descriptor = t.objectExpression([
34
              t.objectProperty(t.identifier('value'), member.value || t.functionExpression(null, [], t.blockStatement([]))),
35
              t.objectProperty(t.identifier('writable'), t.booleanLiteral(true)),
36
              t.objectProperty(t.identifier('configurable'), t.booleanLiteral(true)),
37
            ]);
38

39
            // 替换为：装饰器(类, 方法名, 属性描述符)
40
            methodDecExpr.arguments = [
41
              t.identifier('target'),
42
              targetKey,
43
              descriptor,
44
            ];
45
            member.decorators = null;
46
            member.value = t.callExpression(methodDecExpr.callee, methodDecExpr.arguments);
47
          });
48
        });
49

50
        path.node.decorators = null;
51
      },
52
    },
53
  };
54
};