Babel

An overview of the role Babel plays in React Native projects.

PURPOSE

At its origin, Babel served as a solution to keeping modern JavaScript code backward compatible with run-time environments (desktop browsers, servers, mobile browsers etc.) that did not support the new features introduced by ECMAScript 2015.

Figure 1. As of 2019 obsolete endpoints account for few percent across all use cases.

The build tool has been used to transpile source code containing modern JavaScript syntax and features into legacy code that is bound to run everywhere.

Thanks to the extensible nature of Babel’s design, the tool is also used to solve some other compilation problems. Most notably, it is commonly used in the React ecosystem to transform JSX into JS.

What is more, in projects employing Flow or TypeScript, Babel is also used to strip the source code off type annotations.

TOOLS, PLUGINS & PRESETS

In projects making use of Babel, most of the files associated with the transpillation process are located in the scoped package at:

<project_root>\node_modules\@babel

There a developer will find all the build tools involved in the 3 stages of the compilation process:

Additionally, the directory is populated with modules that contain functions for transforming individual parts of syntax — the plugins:

<project_root>\node_modules\@babel\plugin-*

In projects initiated using React Native CLI, the folder contains the following:

while, in Expo projects the same location contains the following modules:

The combination of plugins is determined by the particular preset installed in the project. The project’s preset can be found in the babel.config.json file at the project’s root. In projects initiated using React Native CLI this is:

while for expo projects the configuration file looks as follows: