How Babel Improves Your JavaScript Development Workflow

Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

It makes available all the syntactical sugar that was added to JavaScript with ES6 and ESNext, including classes, fat arrows, multiline strings, generators and many more.

You can convert pretty much any modern JavaScript features into code that will run on any browser, even the really old ones. This is fantastic news if you need to support older browsers, mobile browsers, Safari, IE11 or anything other than Edge Chrome.

If we want, we can also optionally use it to transpile TypeScript into regular JavaScript that will run in a browser. It’s also used for JSX and TSX. If you’re writing React, chances are you’re already using Babel.

Babel comes packaged as a node module. Installation, as you might expect is via npm:

There are plugins for Webpack, Rollup, Gulp, Grunt, VSCode, Sublime, Webstorm etc. Whatever your development toolchain, Babel can probably slot into it.

While we add Babel to our project we need to add a config file for it. Specifically in the React project we have babel.config.js file which has our Babel configurations. Now, 

There are 2 things:

1. Plugins: used for finer control and customisation options
2. Presets: used for configuring common scenarios

Presets are convenient for setting up Babel for specific environments or usage scenarios without having to manually specify each individual plugin and its options.

Plugins are individual transformations that modify specific aspects of your code. They provide fine grained control over Babel’s behavior, allowing you to enable or disable specific transformations.

• Plugins run before Presets.
• Plugin ordering is first to last.
• Preset ordering is last to first.

 

ES6 is mainly sugar on top of ES5. The JavaScript under the hood remains the same prototypical, list processing language we are used to. ES6 gives us some nice syntax that ultimately transpiles to fairly plain, ordinary JavaScript.

Some of this sugar is for the benefit of Java/C# folk who initially often find prototypical inheritance confusing.

Some of it, such as fat arrows, gives us a terser, more modern looking syntax, and enhances JavaScript’s functional capabilities.

Babel lets us target an earlier version of JavaScript and transpile the latest features into code that will run on them. we can go as far as we want, even down to ES5 if we like. We can write code for Chrome and expect it to run on IE6 if we really want. This is all stuff we used to have to do by hand. Babel does it for us.

  Ready to transform your business with our technology solutions? Contact Us today to Leverage Our ReactJS Expertise.