How to support older browsers with Babel

Welcome to the first of what I intend to be a mini series of short articles in which I explore a topic I’ve recently covered as I continue to learn new things in the world of programming. I’m a self taught developer; so far I’ve specialised in front end engineering, though I’m interested in the back end too. I have a professional background in data visualisation and reporting, and I may well write a bit about those areas also. As well as helping me to make sense of what I’ve learned, hopefully these bite-sized summaries will be useful for other learners too.

Recently I was posed with the question of whether my web projects worked in Internet Explorer 11. When I developed the projects I tested them in modern browsers like Firefox, Chrome, and Edge. So how would they fare in the older IE11? The answer, disappointingly for me, was generally not very well. One of my React projects, which works by fetching data from a server when the page loads, didn’t display anything at all apart from the title of the app. Other projects, such as my noughts and crosses game and my calculator, didn’t have any interactivity. Some projects did work, but they were in a minority. So what was causing the problem and how could I fix it?

The cause of the problem was the JavaScript code that I’d written. Additions and extensions to the JavaScript language are released fairly regularly, which means that it evolves over time. Older browsers such as IE11 may not support these new features though. As an example, in two of my projects I’d used the Array.from() method, which was added to JavaScript in the ECMAScript 2015 specification (also known as ES6). Modern browsers support this method, but IE11 doesn’t, which led to an error when the browser tried to run my code.

A solution to the problem is offered by the popular tool Babel. Babel is a JavaScript compiler, and it enables us to enjoy the benefits and the convenience of writing modern JavaScript code, whilst still supporting older browsers. It works by taking a file containing our JavaScript code as an input, and outputting a new file in which any features which aren’t supported by older browsers are converted into code which they do support. The actual functionality of the code, i.e. what it does when it runs, doesn’t change. The conversion can take the form of syntax transformation. A common example of this is the replacement of the ES6 let and const keywords with var when declaring variables.

Thus

const name = ‘John’;
let age = 36;

becomes

var name = ‘John’;
var age = 36;

The code will now run even if the browser doesn’t support let and const. The conversion can also involve adding code which replicates features which aren’t available in older browsers. This is called polyfilling, and it brings us back to my attempt to use Array.from(). In order to provide this method’s functionality in IE11, Babel can add a polyfill to my script. This is how I was able to get my two projects I mentioned above working in IE11.

Babel is very configurable; you can choose which browsers and versions to target, and Babel will produce an output which will be supported by them. For instance you can choose to support IE11, but not any older version of IE such as 10 or 9. The solution to the issue with my React app was to alter the default configuration provided by Create React App (which uses Babel under the hood), along with including an IE11 polyfill.

I hope you enjoyed reading the article! If you have any questions, suggestions, or corrections, feel free to get in touch with me.

Email: rossmorran@hotmail.co.uk
Twitter: @RossMorran