What does babel do in react native?

Question

I'm trying to figure out the build process for react native and what exactly it is that both the metro bundler and babeljs do. In particular what allows me to use ES5+ syntax. I'm finding some sources that seem to tell me something different. This source says:

Metro combines all javascript code into a single file and translates any Javascript code that device wont understand ( like JSX or some newer javascript syntax )

This one says:

React Native uses Babel to convert React syntax and the newer ES5+ syntax into code that can be run in a JavaScript environment that doesn’t support those features.

So now i'm confused what exactly both do. Also i've found this in the above source (and metro documentation): Metro. The transformation process is described as:

All modules go through a transformer. A transformer is responsible for converting a module to a format that is understandable by the target platform (eg. React Native). Transformation of modules happens in parallel based on the amount of cores that you have.

This sounds exactly like the transpilation that babel is supposed to be doing to me, or is this something different? Appart from that i'm confused what the resolution part of the bundling process works and how exactly it works in parralel to the other steps, but maybe that's a topic for another question.

Chloris

Answer 1

There is a lot of confusion about how everything works together (React-Native, Typescript, Metro, Babel with presets). I will try to describe it.

1. React-Native is based on ReactJS (UI Framework for developing Web-Apps) which coding language is JavaScript.
2. JavaScript has some downside and therefore there is the possibility to take advantage of TypeScript. TypesScript is configured by a tsconfig.json file. There you can configure which files need to be transpiled to JavaScript and which should not. If you start e.g. yarn build:ts and have a configured output directory like /dist you will find the transpiled JavaScript code in that directory.
3. Metro is a JavaScript bundler. It takes in an entry file and various options, and gives you back a single JavaScript file that includes all your code and its dependencies and is started by e.g. yarn start and configured by metro.config.js

Metro has three different stages:

1. Resolution: Metro needs to build a graph of all the modules that are required from the entry point. To find which file is required from another file Metro uses a resolver. In reality this stage happens in parallel with the transformation stage.

2. Transformation: All modules go through a transformer. A transformer is responsible for converting (transpiling) a module to a format that is understandable by the target platform (eg. React Native). Transformation of modules happens in parallel based on the amount of cores that you have.

3. Serialization: As soon as all the modules have been transformed they will be serialized. A serializer combines the modules to generate one or multiple bundles. A bundle is literally a bundle of modules combined into a single JavaScript file.

So, as far as I understand Metro is using Babel in its transformation step. I think that this piece of information is missing in a lot of documentation and explanations. There is no information on that point! Therefore, Babel uses Plugins which tell Babel what to transpile and how to transpile JavaScript Code (e.g. JSX Syntax) from one format to another one. As you can see in the babel.config.js file, the name of the preset is: metro-react-native-babel-preset, which indicates the usage of babel by the metro transformation process.

module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};

Rope

Answer 2

Each JavaScript engine, and each version of it, supports slightly different JavaScript language features. For instance, the JavaScriptCore (JSC) engine used by iOS 12 may not support the exact same feature set as the versions in iOS 13 or iOS 14, and it will almost certainly differ from Android Hermes JS Engine.

To avoid dealing with this complexity when writing an app, we utilize Babel.

Babel is a highly configurable compiler that enables us to use newer JavaScript language features and extensions (such as JSX). It compiles these features into older versions of JavaScript that are supported across a wider range of engines. This process effectively smooths out any differences between various versions of JavaScriptCore (JSC) or between JSC and Hermes, allowing us to write our app without worrying about these discrepancies.

When we initialize a new React Native app, a Babel configuration file, babel.config.js, is generated alongside our project. This file configures Babel with a React Native preset, ensuring that our JavaScript code functions correctly regardless of the engine it runs on.

Karbala