Implementing build step with Babel

The Babel setup is the most complex as it is lower-level and more customizable than TypeScript and other similar tools. I could now start to explain all the plugins, transforms, presets and other stuff you need to install in order to make your own Babel preset, but in my experience it's just not worth it. The easiest solution of all is to just use babel-preset-react-app.

So, what is this preset and why you should trust it?

You may have heard of create-react-app - a ready-to-go CLI tool that provides the developer with everything they need for React app development, testing and building for production. As this tool has basically abstracted away Jest, ESLint, TypeScript, Babel and Webpack, it has some modules that provide a standalone usage. One of these is babel-preset-react-app a preset that is ready to compile TypeScript and Flow, and includes all the required optimizations, along with a minimal API to finetune some pieces of it.

To use it you just need to install @babel/cli to run Babel from the CLI, and babel-preset-react-app to install everything it needs.

Now let's create a babel.config.js file:

Start a new discussion. All notification go to the author.