a blog for those who code

Monday 29 February 2016

Legacy Browser Support for using Babel

In this post we are going to discuss about legacy browser support for using Babel. In our previous post we have discussed about Babel - A JavaScript Compiler. In this post we will continue our discussion on Babel to make sure the future code which we write runs on every browser or not.


There are actually two ways you can get your ECMAScript6 to run on Legacy browsers and they are either you transpiled them or you polyfill them. In this post we will discuss about the latter, that is polyfilling them.

Before discussing about Browser support we should be familiar with two terminology Shim and Polyfill. A shim is a piece of code that brings a new API to an older environment, using only the means of that environment and polyfill is shim for a browser API which retrofits legacy browsers using JavaScript.

To get the browser support in Babel you need to install Babel Polyfill using the command npm install babel-polyfill --save. After you install babel-polyfill you need to add the polyfill.js file in your html file as shown below.

<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.js"></script>

If you go to babeljs.io and click on Learn ES2015 you will get the list of features which are supported using the Polyfill. One of the feature which is supported with the help of polyfill is Promises as shown on Babel Website


The features which are supported through Polyfill are

1. Iterators + For..Of
2. Generators
3. Map + Set + WeakMap + WeakSet
4. Symbols
5. Promises
6. Reflect API

After adding the polyfill.js most of the above features will work on latest version of chrome, IE11 and IE9. To get IE8 support you need to install additional plugins which supports previous version of ECMAScript (i.e. ECMAScript 3).

Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

No comments:

Post a Comment