Web Engine Hackfest 2025
TopicsBabel.jsThe Pattern Matching ProposalIntroduction to Babel

Learning Babel

Babel is a transpiler.

A transpiler is a type of translator that takes the source code of a program written in a programming language as its input and produces an equivalent source code in another programming language or in another version of the same programming language. We can argue that a version of a programming language is in fact another programming language.

A compiler is a type of translator that translates a high-level programming language into Assembly or binary code.

Since Assembly and binary codes are a special kind of programming languages, a compiler is a special kind of transpiler.

If you’ve used JavasScript libraries/frameworks such as React or Vue, then you’ve likely used Webpack with a Babel loader. This Babel loader lets you transpile your code using Babel. When starting a new React project, you may have used Create React App to get started. Similarly, you may have used the Vue CLI when bootstrapping a new Vue project. Internally, both Create React App and the Vue CLI use Webpack and Babel.

The @babel/cli package provides a built-in CLI to transpile files from the command line.

Most of the orchestration between parsing, transforming, and generating code is done through @babel/core, but you’re able to use each Babel package individually if needed.

The process of transpiling code with Babel is as follows:

  1. Babel parses the source code into an AST using @babel/parser. This parser was based in acorn.
  2. Then, Babel performs operations or transformations on the AST using a visitor pattern for the plugins and presets (predefined groups of plugins).

  • For each plugin, it uses @babel/traverse to traverse through the AST. Each plugin gets one complete traversal of the AST

  • During the traversal, plugin’s visitor methods are called for each matching node in the AST

  • Babel processes plugins in a specific order :

    1. Plugins run before presets
    2. Plugin ordering is first-to-last (left-to-right in your config)
    3. Preset ordering is last-to-first (right-to-left in your config)

    for example, if you have the following Babel configuration babel.config.json:

    {
  "plugins": ["plugin-a", "plugin-b", "plugin-c"],
  "presets": ["preset-x", "preset-y", "preset-z"]
}

    Execution order: plugin-a → plugin-b → plugin-c → preset-z → preset-y → preset-x

    The transformation process stops when:

    1. All plugins have completed their traversal
    2. All transformations are applied
    3. The final AST is generated

    There’s no looping or re-running of plugins unless explicitly configured to do so.

The plugins can modify the AST nodes, add new nodes, or remove existing ones. This is where the actual transformation of the code happens.

Each plugin gets exactly one opportunity to traverse and transform the AST, making the process predictable and efficient. 3. Then @babel/generator converts the transformed AST back into code, which is simply just a string.

Follow the tutorial https://github.com/ULL-ESIT-PL/babel-learning to get familiar with Babel and learn how to create a Babel plugin.

TC39

See section TC39 for a description of the TC39 and the process followed by a proposal to be accepted as a standard.

The forum at https://es.discourse.group/ is the official discussion forum for TC39. Join the https://es.discourse.group and have a look.

The TC39 Proposal Pattern Matching and plugins

See section Pattern Matching for a description of the proposal and the 0-syntax Babel plugin https://github.com/iptop/babel-plugin-proposal-pattern-matching.

The Task

Following the chapter at https://github.com/ULL-ESIT-PL/babel-learning/tree/main/src/awesome/tc39-pattern-matching re-create your own Babel plugin that implements as much as you can of the TC39 pattern matching proposal.

Videos

2025/03/31

Functions on the left side of an assignment. Introduction to Babel

2025/04/02

Babel templates. Scope in Babel

Videos about Babel

  1. Romulo Cintra introduces the way the TC39 works.
  1. Henry Zhu: “So how does Babel even work.”
  2. Ross Kirsling, member of the TC39 committee, describes in JSConfJP how the optional chaining operator was added to JS from the specification to the implementation, including bytecode generation. It is a generic talk, not a Babel talk.
  3. Nicolo Ribaudo, Babel developer, makes a “demo” showing how to write a Babel plugin to implement the optional chaining.
  4. The last one is in Chinese. It is a talk by iptop, the author of the pattern-matching plugin.





References

Scope in BabelPattern Matching Proposal and Plugin