WebStorm & React Native: Transpiles ECMAScript 6 code to ECMAScript 5 – Babel

Hi, geeks!

If you plan to use WebStorm for React Native development, it’s good to set a file watcher.
From the jetbrains blog we will find that
“For some time now WebStorm has supported ECMAScript 6 (a.k.a. ECMAScript 2015), the future standard for JavaScript. While its features get more and more support in modern browsers and runtimes (see the Kangax compatibility table), to deploy your ES6 code you still need to compile it to ES5.1, the current version of JavaScript.”

Setting up Babel File watcher

File watcher is a WebStorm built-in tool that allows you to automatically run some command-line tools on file changes. For Babel WebStorm has pre-configured File watchers. Let’s see how to enable it.

Install Babel CLI in your project via npm:

npm install --save-dev babel-cli

Now go to Preferences | Tools | File watchers, click + button and select Babel file watcher from the list.

In addition to that, you need to install Babel 6 preset for transpiling ECMAScript 6 locally in your project (for JSX you need babel-preset-react plugin instead). To do that open the Terminal at your application root directory and run:

npm i babel-preset-react-native --save-dev

Add .babelrc file to your project with the following code to enable the preset:

  "presets": ["react-native"]

All other Watcher settings are predefined, so it is now ready to use. With this default setup, compiled files will be located next to the original files.

babel react native

I’ll come back with more details soon.



Babel preset on GitHub


Silviu Stroe
I'm Silviu and I run Brainic, a mobile-focused software agency. I'm also a member of Nokia and Yahoo wall of fame. My interests are in low-code/no-code development and bleeding-edge technologies.

Leave a Reply

Your email address will not be published. Required fields are marked *