Perspective Unspoken

My perspective on Git, Docker, Python, Django, PHP and other stuff

Compiling React using Gulp and Babel

Babel is a great toolkit for doing all sorts of Javascript compilations. Maybe the most popular is ES2015. It’s also great for compiling React code. Turns out the setup process wasn’t too bad either. Babel has several hundred plugins that can be used to do all kinds of stuff. Fortunately, Babel has put together presets that bundle plugins. There’s an ES2015 preset and also a React preset.

Once you have your package.json  setup via npm init , we need to install a couple packages.

Next, we need our Gulpfile.js. 

And now for the explanation…

We have a default task that watches for changes in a *.jsx in a jsx folder then calls the compileJsx task.

The compileJsx task again grabs all jsx files in the jsx folder, then pipes the output to plumber to catch errors. The sourcemaps plugin is used to write source maps to the resulting JS file. We call init before writing out the compiled source. The concat plugin will concatenate all our JSX files into one app.js file. The babel plugin is what does the actual compiling of our source. We tell it to use the react preset.




jaywhy13 • June 6, 2016

Previous Post

Next Post