⏱ Estimated reading time: 2 minutes

By Sven Sauleau, Compiler developer @ Igalia
Website - Video [Low quality, FR]

Table of Contents


Like most compilers, Babel works by running three passes:

  1. It starts by generating an abstract representation of the code called an Abstract Syntax Tree;
  2. It optimizes this representation, effectively simplifying and removing unused elements;
  3. It rewrites the remainder in a preset JavaScript format, understandable to the targeted browsers.

Babel is present at each of the decision steps of the Technical Committee 39 or TC39 for short. This committee decides the state of the JavaScript standards and features. The babel/proposals GitHub repository contains a Babel implementation of some of these proposals. These proposals can be enabled with the right packages and options or can be tried out directly in the Babel REPL!

What’s new?

Babel 7 comes with massive changes, including, for the most important ones:

  • End of the support for Node versions before 6.0;
  • End of the presets: now, you can have one preset package to rule them all!
  • Scoped packages: Babel packages are now scoped under @babel [Example];
  • Babel-Upgrade: to reduce the amount of breakage due to the upgrade, this new tool will ease your work;
  • Support for TypeScript and React Fragments!
  • Pure annotations: a hint for the uglifiers that help them with dead code elimination.

As for some of the most recent proposals:

  • Optional chaining: a very cool feature that will allow you to forget checking every nested property before moving on to its children [Proposal];
  • Object rest spread: a way to do clean Object destructuring [Proposal].

Questions and details

  1. Where can we check the roadmap?
    The roadmap for Babel can be found here.

  2. Can the pure annotations remove a variable if its purpose is to store a flagged dead function?
    Yes, thanks to the optimization pass after the abstract representation of the code!