As you all know, now we have 100% support for ES6 in most of the browsers. I am trying to split my bundles into two ES5 and ES6 and get smaller bundle with ES6.
I tried and I was able to see 2 different bundles. But I did not see much of a difference in size. Because, Babel is trying not converting ES5 code into ES6 which is not giving much gain in the bundle size.
Is there any feature in Babel to transpile ES5 code into ES6?
Related
I have written a bunch of Javascript code. I was never aware of the fact that there are multiple JS 'versions', like ES5 and ES6.
I now have this project hosted on Github, and somebody pointed out that because i'm using ES6 code, I might need to convert it to ES5 with Babel.
However, I have no idea which parts of my code use ES6. I could read all of the ES6 specifications, but is there some kind of tool/checker which marks all of the ES6 code in my project?
http://jshint.com/ or http://www.jslint.com/ - will detect ES6 specific specifications by just adding your code in the console
Add it into the Babel repl and see if it changes:
https://babeljs.io/repl/
:-) Hope that helps
Other than that it might be best to setup es6 with babel using webpack, gulp, rollup etc
So that if you write es6 or es5 it will automatically get converted and you can learn some new features on the way while still supporting es5 only browsers
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?
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 (e.g. 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).
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.
If we write script using the plain javascript syntax and use babel to compile it, Are babel able to read it and compile it to plain javascript normally, or would that cause an error ?
Babel can transpile ES6.
ES6 is a superset of ES5 (which is what I assume you mean by "plain JavaScript").
Therefore, yes it can (there just isn't much point in converting ES5 to ES5).
I enabled ECMAScript 6 on WebStorm so that I do not get IDE errors when using arrow functions.
However, I did not install Babel. I was prompted to install Babel after enabling ECMAScript 6. I had problems installing Babel.
Is it necessary to use Babel together with ECMAScript 6? What would be the side effect of enabling ECMAScript 6 without installing Babel?
I am using node.js on WebStorm.
The purposes of Babel is to convert es6 code into es5 code BECAUSE most browsers do not FULLY support es6 yet, although are getting closer.
https://kangax.github.io/compat-table/es6/
You will see that IE11 support is poor whilst Firefox and Chrome almost have full support.
However, given that the latest Node fully understands ES6 there is now no need for Babel when using Node only unless of course you need to support older versions of Node which only understand ES5.
PS: if you enable Babel support in Webstorm it can generate ES5 files on the fly for you as you code in ES6. Alternatively, you can use a task runner such as Grunt or Gulp to do this for you. Depends if you need it!
Basically I need to be able to write TypeScript code in my IDE (this introduces great ease to development), compile it to ES6 and then apply babel.js (as all browsers doesn't support most ES6) to get the resulting ES5 scripts.
Is this possible? How can I achieve this?
Yes.
You can target TypeScript compiler to ES6.
For example add this to your command line args:
--target es6
Yes, You can.
Either by adding --target es2015, or by adding target to Your tsconfig.json:
{
"compilerOptions": {
"target": "es2015"
}
}
Supported options for target are:
"ES3" (default)
"ES5"
"ES6"/"ES2015"
"ES2016"
"ES2017"
"ESNext"
There are a lot of more config options. You can explore them here:
Compiler options
Some options are only allowed in tsconfig.json, and not through command-line switches.
You can use typescript to write pure ES6 and then transpile to ES3 or ES5. Since typescript is ES6 plus goodies.
See it as using Less to write your css, you can write pure CSS in a less file and it will compile just fine.
For typescript 1.8 language spec:
TypeScript is a syntactic sugar for JavaScript. TypeScript syntax is a superset of ECMAScript 2015 (ES2015) syntax. Every JavaScript program is also a TypeScript program.
TypeScript syntax includes all features of ECMAScript 2015, including classes and modules, and provides the ability to translate these features into ECMAScript 3 or 5 compliant code.
TypeScript is more or less ES6 with very little syntactic sugar.
I would suggest you write Vanilla ES6 instead of TypeScript but on the other hand TypeScript tooling is worth putting in the extra effort to write TypeScript and transpile it into ES6 and let Babel do the rest.
Here is a more convenient option like noted in a comment, from TypeScript 1.5 you have the ability to transpile to ES6.