Is there a JavaScript module, that can be installed in current versions of Node, that provides some ES6 features e.g. Map? (The version of Map provided by node --harmony doesn't yet implement enough features to be useful.)
This compatibility matrix should be of use.
Of particular interest, might be google's traceur compiler which will translate es6 code to es5 to run anywhere
Related
I rewrote ES5 package to modern syntax to avoid deprecation warnings and published it to npm.
Most React projects, including ones based on next.js and create-react-app use uglify.js and they break at class keyword.
{ Error: commons.js from UglifyJs
Unexpected token: name
...
How do I properly write React component that uses class and works with uglify.js and npm?
React.createClass has been deprecated because it's going to be removed from the main react package in an upcoming version, but you can still use the now-separate create-react-class package instead if you still need/want to write components using it without getting deprecation warnings.
If you're using ES6 classes to write components which will be published to npm, you will need to add a transpile step so you're publishing ES5 code to npm for the forseeable future because - as you've seen - tools which don't support ES6 will break on them, and apps which use them will break in browsers which don't support ES6 classes natively (e.g. IE11).
If you already have Babel set up to transpile JSX, transpiling classes away before publishing isn't much extra work - install the babel-preset-es2015 preset and add it to your Babel config.
Even when we reach the point where ES6 support in tools and browsers is no longer an issue, standard ES6 classes aren't a very convenient way to write React components compared to createClass, as they introduce constructor boilerplate, need manual method binding and having to declare static properties such as propTypes separately.
It's common to use experimental implementations of proposed language features (babel-preset-stage-2 covers the most useful ones) for those convenience features to overcome this (even the documentation above about writing React components without ES6 has an example of this) and transpile them away with Babel plugins, so if you use these features you will have to keep transpiling your code anyway!
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.
Is there any way to run ES6 in Node REPL (Read Evaluate Print Loop)? While running ES 6 commands, I am getting error as shown in the screenshot. Appreciate if someone can help me to configure Node to run ES6 code.
TL;DR: Upgrade Node
I have Node.js v6.0.0, which means I have all the ES6 features unlocked by default. My REPL has support for (basically) everything. Now, node v6.0.0 is currently in development, so you might not want to upgrade your production server, but if you're a developer, it's really stable enough for everyday use.
If you must use an outdated version of node, I would suggest you install n. It's a way to manage your versions of node on one machine.
Good Luck!
Node 4 and higher supports most ES6 features out of the box, here is compatibility table.
To use ES6 features in older Node versions, it should be started with --harmony flag, and code should run in strict mode.
It is not possible to enable strict mode with 'use strict' for REPL globally, so ES6 code should be placed inside IIFE.
Strict mode can be enabled globally with --use_strict. To enable experimental ES6 support in REPL in older Node versions (0.12.x and lower) it should be started with
node --harmony --use_strict
Add 'use strict'.
Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.
more information about use strict is here or here
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!
After reading Peter's article on JavaScript I noticed
Brendan Eich stated that one the goals for Harmony is to be a better target for to-JavaScript compilers.
There are currently two popular compilers with some vague ES:Harmony compliance:
Traceur
CoffeeScript
Although CoffeeScript has some compliance it's not designed to be an ES:Harmony compiler so it's not useful to this end.
Tracuer seems to be sticking more rigorously to the ES:Harmony specification but I don't know whether it intends to become a full ES:Harmony compiler.
Since the aim is to to compile ES6 down to ES3 it would also need to support ES5 features (and probably a switch whether to compile ES5 to ES3 or ES6 to ES3).
Are there currently any other projects aiming to create a full ES:Harmony to ES3 compiler?
Is it wise to start writing such a compiler knowing that the standard is young / unstable / in flux.
Are there currently any ES5 -> ES3 compilers?
I've left a question on the Traceur mailing list.
The aim of such a compiler would be backwards compatibility with ES3. Not full emulation of ES5 and ES6 in ES3.
(shameless but relevant plug below)
Caja is reworking its ES5 support via ES5/3 and will do the same for ES harmony. So our structure would be implemented as a Harmony to ES3 layer which can be skipped for real harmony implementations, and then a separable loader that preserves the security properties that concern caja.
Like Traceur, members of the Caja team are part of TC39 (the committee defining ES Harmony).
I don't know about Coffeescript's plans, but it was mentioned during discussions of Harmony modules. Module loaders will likely have the ability to intercept loaded source code (via eval hooks) and rewrite it before module initialization, so if a module is written in CoffeeScript, a runtime CoffeeScript rewriter could be invoked at initialization time. This would allow apps to be composed of modules written in multiple languages that compile down to Harmony at load time.
One thing to note is that not everything in Harmony can be implemented easily via translation. For example, implementing weak maps correctly would require implementing your own garbage collector in JavaScript and even if you did that you would probably just reintroduce the host object/native object cycle problem.
Check out TypeScript, Microsoft's new language based on ES6.
Continuum has implemented most of the relevant features and should run in es3 browsers (like older IEs).
Mascara is probably what you're looking for.
As of the time of typing, we now have Babel. It integrates with many different build tools/systems, and will transpile ES6+ in order to support legacy browsers (it doesn't state which version it targets, but it does say that it targets IE9+).
To install it type npm install babel -g.
Note that it has rather a lot of dependencies and when installed it is ~23.4 MB (2888 files).
Google Closure Compiler (Github) is a great tool for ES6 compilation. It's a simple Java jar that is used from the command line. There are other options such as API services and GUIs, but I find that it was best to set up an automatic build system hooking into the Java JAR. It can transpile your ES6 code into ES5 compatible code. I started using it for compressing and obfuscating code, but it can also do error checking and the ES6 transpilation as I mentioned.
Note that the ES6 features are marked as experimental. But I'm planning on using them in production soon, since my tests were rock solid.
There's also https://github.com/matthewrobb/six
Six is a language super-set of JavaScript that enables new syntactic features from the 6th edition of ECMAScript to be used, through a transpiler, in your scripts today.
WARNING: Still in a very early state, proceed with caution.
I'm not sure in what instance compilation back to ES3 would valuable as opposed to ES5, seeing that implementation changes are limited to array and object helper functions, and ES5 support is so prevalent.
So for completeness, another ES6 to ES5 compiler is the esnext project by Square. It is a collection of a number of modules designed to polyfill various ES6 features provided in one package. Here is the list modules included: https://github.com/square/esnext#available