Babel 高级特性 #

// 源代码
const add = (a, b) => a + b;

// 完整 AST 结构
{
  "type": "Program",
  "sourceType": "module",
  "body": [
    {
      "type": "VariableDeclaration",
      "kind": "const",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "add"
          },
          "init": {
            "type": "ArrowFunctionExpression",
            "params": [
              { "type": "Identifier", "name": "a" },
              { "type": "Identifier", "name": "b" }
            ],
            "body": {
              "type": "BinaryExpression",
              "operator": "+",
              "left": { "type": "Identifier", "name": "a" },
              "right": { "type": "Identifier", "name": "b" }
            }
          }
        }
      ]
    }
  ]
}

// 标识符
{
  type: "Identifier",
  name: "variableName"
}

// 字面量
{
  type: "NumericLiteral",
  value: 42
}
{
  type: "StringLiteral",
  value: "hello"
}
{
  type: "BooleanLiteral",
  value: true
}

// 二元表达式
{
  type: "BinaryExpression",
  operator: "+",
  left: { type: "Identifier", name: "a" },
  right: { type: "Identifier", name: "b" }
}

// 函数调用
{
  type: "CallExpression",
  callee: { type: "Identifier", name: "fn" },
  arguments: []
}

// 成员表达式
{
  type: "MemberExpression",
  object: { type: "Identifier", name: "obj" },
  property: { type: "Identifier", name: "prop" },
  computed: false
}

const t = require('@babel/types');

// 创建标识符
const id = t.identifier('myVar');

// 创建数字字面量
const num = t.numericLiteral(42);

// 创建字符串字面量
const str = t.stringLiteral('hello');

// 创建二元表达式
const binary = t.binaryExpression('+', t.identifier('a'), t.identifier('b'));

// 创建函数声明
const fn = t.functionDeclaration(
  t.identifier('add'),
  [t.identifier('a'), t.identifier('b')],
  t.blockStatement([
    t.returnStatement(
      t.binaryExpression('+', t.identifier('a'), t.identifier('b'))
    )
  ])
);

// 创建变量声明
const decl = t.variableDeclaration('const', [
  t.variableDeclarator(t.identifier('x'), t.numericLiteral(1))
]);

const babel = require('@babel/core');
const traverse = require('@babel/traverse');
const t = require('@babel/types');

const code = `
  function add(a, b) {
    return a + b;
  }
`;

const ast = babel.parseSync(code);

traverse(ast, {
  FunctionDeclaration(path) {
    const name = path.node.id.name;
    console.log('Found function:', name);

    path.node.id.name = name.toUpperCase();
  },

  BinaryExpression(path) {
    if (path.node.operator === '+') {
      path.replaceWith(
        t.callExpression(
          t.identifier('add'),
          [path.node.left, path.node.right]
        )
      );
    }
  }
});

const output = babel.transformFromAstSync(ast);
console.log(output.code);

const traverse = require('@babel/traverse');

traverse(ast, {
  Identifier(path) {
    const name = path.node.name;
    const binding = path.scope.getBinding(name);

    if (binding) {
      console.log(`Variable "${name}":`);
      console.log('  Kind:', binding.kind);
      console.log('  Constant:', binding.constant);
      console.log('  References:', binding.references);
      console.log('  Path:', binding.path.node.type);
    }
  }
});

traverse(ast, {
  FunctionDeclaration(path) {
    const paramName = path.node.params[0].name;

    const binding = path.scope.getBinding(paramName);
    if (binding) {
      binding.path.rename('newParamName');
    }

    const uid = path.scope.generateUidIdentifier('temp');
    path.scope.push({
      id: uid,
      init: t.numericLiteral(0)
    });
  }
});

module.exports = function autoBindThis(babel) {
  const { types: t } = babel;

  return {
    name: 'auto-bind-this',
    visitor: {
      ClassDeclaration(path) {
        const className = path.node.id.name;
        const methods = [];

        path.traverse({
          ClassMethod(methodPath) {
            if (methodPath.node.kind === 'method') {
              methods.push(methodPath.node.key.name);
            }
          }
        });

        if (methods.length > 0) {
          const constructor = t.classMethod(
            'constructor',
            t.identifier('constructor'),
            [],
            t.blockStatement([
              ...methods.map(method =>
                t.expressionStatement(
                  t.assignmentExpression(
                    '=',
                    t.memberExpression(
                      t.thisExpression(),
                      t.identifier(method)
                    ),
                    t.callExpression(
                      t.memberExpression(
                        t.memberExpression(
                          t.thisExpression(),
                          t.identifier(method)
                        ),
                        t.identifier('bind')
                      ),
                      [t.thisExpression()]
                    )
                  )
                )
              )
            ])
          );

          path.node.body.body.unshift(constructor);
        }
      }
    }
  };
};

module.exports = function timingLogger(babel) {
  const { types: t } = babel;

  return {
    name: 'timing-logger',
    visitor: {
      FunctionDeclaration(path) {
        if (path.node.async) {
          const name = path.node.id.name;
          const body = path.node.body;

          const timingCode = t.blockStatement([
            t.variableDeclaration('const', [
              t.variableDeclarator(
                t.identifier('start'),
                t.callExpression(
                  t.memberExpression(
                    t.identifier('Date'),
                    t.identifier('now')
                  ),
                  []
                )
              )
            ]),
            t.tryStatement(
              body,
              null,
              t.blockStatement([
                t.expressionStatement(
                  t.callExpression(
                    t.memberExpression(
                      t.identifier('console'),
                      t.identifier('log')
                    ),
                    [
                      t.stringLiteral(`${name} took:`),
                      t.binaryExpression(
                        '-',
                        t.callExpression(
                          t.memberExpression(
                            t.identifier('Date'),
                            t.identifier('now')
                          ),
                          []
                        ),
                        t.identifier('start')
                      ),
                      t.stringLiteral('ms')
                    ]
                  )
                )
              ])
            )
          ]);

          path.node.body = timingCode;
        }
      }
    }
  };
};

module.exports = function conditionalCompile(babel) {
  const { types: t } = babel;

  const CONDITIONS = {
    IS_PRODUCTION: process.env.NODE_ENV === 'production',
    IS_DEVELOPMENT: process.env.NODE_ENV === 'development',
    IS_TEST: process.env.NODE_ENV === 'test'
  };

  return {
    name: 'conditional-compile',
    visitor: {
      IfStatement(path) {
        const test = path.node.test;

        if (
          t.isMemberExpression(test) &&
          t.isIdentifier(test.object, { name: 'CONDITIONS' })
        ) {
          const conditionName = test.property.name;
          const value = CONDITIONS[conditionName];

          if (value) {
            path.replaceWith(path.node.consequent);
          } else {
            path.remove();
          }
        }
      }
    }
  };
};

// 使用
if (CONDITIONS.IS_PRODUCTION) {
  console.log('Production mode');
}

// 使用宏
import css from 'styled-components/macro';

const Button = css`
  padding: 10px 20px;
  background: blue;
`;

// my-macro.js
const { createMacro } = require('babel-plugin-macros');

module.exports = createMacro(myMacro);

function myMacro({ references, state, babel }) {
  const { types: t } = babel;

  references.default.forEach(referencePath => {
    const parentPath = referencePath.parentPath;

    if (parentPath.isCallExpression()) {
      const args = parentPath.node.arguments;
      const firstArg = args[0];

      if (t.isStringLiteral(firstArg)) {
        parentPath.replaceWith(
          t.stringLiteral(firstArg.value.toUpperCase())
        );
      }
    }
  });
}

// 使用
import upper from './my-macro';
const result = upper('hello'); // 编译后: const result = "HELLO";

// enum.macro.js
const { createMacro } = require('babel-plugin-macros');

module.exports = createMacro(enumMacro);

function enumMacro({ references, babel }) {
  const { types: t } = babel;

  references.default.forEach(referencePath => {
    const parentPath = referencePath.parentPath;

    if (parentPath.isCallExpression()) {
      const args = parentPath.node.arguments;
      const enumName = args[0].value;
      const enumValues = args[1];

      if (t.isObjectExpression(enumValues)) {
        const properties = enumValues.properties.map(prop => {
          return t.objectProperty(
            t.identifier(prop.key.name),
            t.stringLiteral(prop.key.name)
          );
        });

        parentPath.replaceWith(
          t.variableDeclaration('const', [
            t.variableDeclarator(
              t.identifier(enumName),
              t.objectExpression(properties)
            )
          ])
        );
      }
    }
  });
}

// 使用
import enumm from './enum.macro';
enumm('Status', { Active: 0, Inactive: 1 });

// 编译后
const Status = {
  Active: "Active",
  Inactive: "Inactive"
};

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

const ast = t.program([
  t.variableDeclaration('const', [
    t.variableDeclarator(
      t.identifier('message'),
      t.stringLiteral('Hello, World!')
    )
  ])
]);

const output = generate(ast, {
  comments: true,
  compact: false,
  retainLines: false,
  concise: false,
  quotes: 'single',
  jsonCompatibleStrings: true
});

console.log(output.code);

const output = generate(ast, {
  comments: true,           // 保留注释
  compact: false,           // 紧凑输出
  retainLines: false,       // 保留行号
  concise: false,           // 简洁模式
  quotes: 'single',         // 引号类型
  jsonCompatibleStrings: true,
  jsescOption: {
    minimal: true
  }
});

const babel = require('@babel/core');

const result = babel.transformSync(code, {
  presets: ['@babel/preset-env'],
  sourceMaps: true,
  filename: 'source.js'
});

console.log(result.code);
console.log(result.map);

const result = babel.transformSync(code, {
  sourceMaps: true,
  sourceFileName: 'original.js',
  sourceRoot: '/src',
  inputSourceMap: previousSourceMap
});

// babel.config.js
module.exports = function(api) {
  api.cache.using(() => {
    return process.env.NODE_ENV + process.env.BABEL_ENV;
  });

  return {
    presets: ['@babel/preset-env']
  };
};

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};

// 不推荐：使用过多单独插件
module.exports = {
  plugins: [
    '@babel/plugin-transform-arrow-functions',
    '@babel/plugin-transform-classes',
    '@babel/plugin-transform-template-literals',
    // ...更多插件
  ]
};

// 推荐：使用 preset-env
module.exports = {
  presets: ['@babel/preset-env']
};

// 使用 worker 进行并行处理
const { transformSync } = require('@babel/core');
const { Worker } = require('worker_threads');

async function parallelTransform(files) {
  const workers = files.map(file => {
    return new Promise((resolve, reject) => {
      const worker = new Worker('./babel-worker.js', {
        workerData: file
      });
      worker.on('message', resolve);
      worker.on('error', reject);
    });
  });

  return Promise.all(workers);
}

const parser = require('@babel/parser');
const traverse = require('@babel/traverse');
const generate = require('@babel/generator');

const code = 'const x = 1;';
const ast = parser.parse(code);

// 打印 AST
console.log(JSON.stringify(ast, null, 2));

// 使用 astexplorer.net 在线查看

// 在插件中添加断点
module.exports = function(babel) {
  return {
    visitor: {
      Identifier(path) {
        // 使用 debugger 断点
        debugger;
        console.log('Identifier:', path.node.name);
      }
    }
  };
};

module.exports = function(babel) {
  return {
    visitor: {
      Program: {
        enter(path) {
          console.log('Enter program');
        },
        exit(path) {
          console.log('Exit program');
        }
      },
      FunctionDeclaration: {
        enter(path) {
          console.log('Enter function:', path.node.id?.name);
        },
        exit(path) {
          console.log('Exit function:', path.node.id?.name);
        }
      }
    }
  };
};

module.exports = function injectCode(babel) {
  const { types: t } = babel;

  return {
    visitor: {
      Program(path) {
        const injectCode = t.expressionStatement(
          t.callExpression(
            t.memberExpression(
              t.identifier('console'),
              t.identifier('log')
            ),
            [t.stringLiteral('Code injected!')]
          )
        );

        path.node.body.unshift(injectCode);
      }
    }
  };
};

module.exports = function codeStats(babel) {
  let functionCount = 0;
  let classCount = 0;
  let importCount = 0;

  return {
    name: 'code-stats',
    visitor: {
      FunctionDeclaration() { functionCount++; },
      ClassDeclaration() { classCount++; },
      ImportDeclaration() { importCount++; }
    },
    post(state) {
      console.log('Code Statistics:');
      console.log('  Functions:', functionCount);
      console.log('  Classes:', classCount);
      console.log('  Imports:', importCount);
    }
  };
};

module.exports = function dependencyAnalysis(babel) {
  const { types: t } = babel;
  const dependencies = new Set();

  return {
    name: 'dependency-analysis',
    visitor: {
      ImportDeclaration(path) {
        dependencies.add(path.node.source.value);
      },
      CallExpression(path) {
        if (
          t.isIdentifier(path.node.callee, { name: 'require' }) &&
          path.node.arguments.length === 1 &&
          t.isStringLiteral(path.node.arguments[0])
        ) {
          dependencies.add(path.node.arguments[0].value);
        }
      }
    },
    post(state) {
      console.log('Dependencies:', Array.from(dependencies));
    }
  };
};