Understanding Babel: How It Works and How to Write a Babel Plugin

Babel is a JavaScript compiler widely used in the frontend ecosystem. It transforms new language syntax (e.g., arrow functions, let / const, destructuring) into code that runs on older environments, while features such as global variables, Promise, Symbol, and other built‑in APIs are outside its scope and require polyfills.

The compilation process consists of three stages:

Parsing : source code is parsed into an Abstract Syntax Tree (AST).

Transformation : the AST is traversed and transformed according to plugins or presets.

Code Generation : the transformed AST is turned back into JavaScript code, typically using babel-generator.

For example, the code console.log('zcy'); is parsed into the following AST:

{
  "type": "Program",
  "body": [{
    "type": "ExpressionStatement",
    "expression": {
      "type": "CallExpression",
      "callee": {
        "type": "MemberExpression",
        "object": {"type": "Identifier", "name": "console"},
        "property": {"type": "Identifier", "name": "log"}
      },
      "arguments": [{"type": "Literal", "value": "zcy", "raw": "'zcy'"}]
    }
  }],
  "sourceType": "script"
}

The article also shows a simple tokenizer implementation that splits input into tokens such as identifiers, numbers, strings, punctuators, and whitespace:

function tokenizer(input) {
  const tokens = [];
  const punctuators = [',', '.', '(', ')', '=', ';'];
  let current = 0;
  while (current < input.length) {
    let char = input[current];
    if (punctuators.indexOf(char) !== -1) {
      tokens.push({ type: 'Punctuator', value: char });
      current++;
      continue;
    }
    // whitespace
    const WHITESPACE = /\s/;
    if (WHITESPACE.test(char)) { current++; continue; }
    // identifier
    if (/[a-zA-Z\$_]/.test(char)) {
      let value = '';
      while (/[a-zA-Z0-9\$_]/.test(char)) { value += char; char = input[++current]; }
      tokens.push({ type: 'Identifier', value });
      continue;
    }
    // number
    const NUMBERS = /[0-9]/;
    if (NUMBERS.test(char)) {
      let value = '';
      while (NUMBERS.test(char)) { value += char; char = input[++current]; }
      tokens.push({ type: 'Numeric', value });
      continue;
    }
    // string
    if (char === '"') {
      let value = '';
      char = input[++current];
      while (char !== '"') { value += char; char = input[++current]; }
      char = input[++current];
      tokens.push({ type: 'String', value });
      continue;
    }
    throw new TypeError('Unexpected charactor: ' + char);
  }
  return tokens;
}

const input = `console.log("zcy");`;
console.log(tokenizer(input));

Plugins are the core of Babel's transformation stage. A plugin is a function that receives the Babel API object and returns an object with a visitor property. Each visitor method receives a path and state argument, allowing manipulation of specific AST node types.

Example: a plugin that renames all variables named a to b:

export default function({ types: t }) {
  return {
    visitor: {
      VariableDeclarator(path) {
        if (path.node.id.name === 'a') {
          path.node.id = t.identifier('b');
        }
      }
    }
  };
};

Another example rewrites named imports from a library into default imports for on‑demand loading (similar to babel-plugin-import):

export default function({ types: t }) {
  return {
    visitor: {
      ImportDeclaration(path) {
        const { node: { specifiers, source } } = path;
        if (!t.isImportDefaultSpecifier(specifiers[0])) {
          const newImport = specifiers.map(specifier =>
            t.importDeclaration(
              [t.importDefaultSpecifier(specifier.local)],
              t.stringLiteral(`${source.value}/lib/${specifier.local.name}`)
            )
          );
          path.replaceWithMultiple(newImport);
        }
      }
    }
  };
};

The article also lists common Babel packages and their purposes: @babel/core: core compiler API (e.g., transform, parse). @babel/cli: command‑line interface for running Babel. @babel/node: run ES6+ code directly in Node. babylon: the parser used by Babel. babel-traverse: traverses and manipulates the AST. babel-types: utility library for building and validating AST nodes. babel-generator: generates code from an AST.

In summary, the article introduces Babel's compilation pipeline, demonstrates how to inspect and generate ASTs, and provides practical examples of writing simple Babel plugins for code transformation.

At the end, the original author includes a recruitment notice for the ZooTeam frontend group, inviting interested developers to contact [email protected].