Adding Babel

Installing Babel

As mentioned in the last lesson, our project is going to use Babel to convert our React and TypeScript code to JavaScript. Let’s install Babel with the necessary plugins as a development dependency:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime @babel/runtime

Here’s an explanation of the packages we have just installed:

• @babel/core: As the name suggests, this is the core Babel library.
• @babel/preset-env: This is a collection of plugins that allow us to use the latest JavaScript features but still target browsers that don’t support them.
• @babel/preset-react: This is a collection of plugins that enable Babel to transform React code into JavaScript.
• @babel/preset-typescript: This is a plugin that enables Babel to transform TypeScript code into JavaScript.
• @babel/plugin-transform-runtime and @babel/runtime: These are plugins that allow us to use the async and await JavaScript features.

Configuring Babel

Babel is configured in a file called .babelrc. Let’s create this file in the root of our project with the following content:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

This configuration tells Babel to use the plugins we have installed.