Can I target ES6 with Typescript if I am using babel-polyfill?

Question

I am writing a Typescript / React / Redux application that takes advantage of modern ES6+ features like generators and object spread.

I am currently setting my tsconfig.json target to ES5 and also including babel-polyfill in my application.

Since ES6 is faster than ES5 in most browsers, I would prefer to target ES6 from my Typescript config. However, I am concerned that I will not be able to support as many browsers.

Does babel-polyfill provide the same level of ES5 support as transpiling to an ES5 target?

Answer 1

Does babel-polyfill provide the same level of ES5 support as transpiling to an ES5 target?

No.

babel-polyfill adds missing ES6 runtime classes and methods . For example, if the browser running your script does not have Promise or Array.prototype.includes , it adds implementations for those into the global scope so that they exist when your code attempts to use them.

It cannot add missing support for ES6 syntax to the browser. If your JavaScript code contains ES6 syntax (eg class , ... , or yield ), then an ES5 browser will fail to parse your code . No amount of additional JavaScript code at runtime can change how the browser parses your code, so the polyfill doesn't help there.

Bottom-line: if you want to use ES6 syntax and still support ES5 browsers, you must transform your code to ES5 (either by targeting ES5 from TypeScript, or by transforming using Babel).

Answer 2

In short, no, babel-polyfill doesn't provide the same level of ES5 support as transpiling. The documentation states that it includes a custom regenerator runtime as well as core-js.

You can check out core-js to see that it contains the polyfills you need. However, the object-spread syntax cannot be polyfilled, only transpiled.