I understand the ES6 modules specification, the question is about its support. AFAIK, there are no browsers that implement this natively (see Browser compatibility here). Got a couple of questions about this:
ES6 modules is an ES6 feature, obviously. When I look at kangax compatibility table, I don't see such row (for ES6 modules) at all, why is that? It's a ES6 feature afterall...
hence, the only way to use ES6 right now is to use a build tool, such as babel, browserify or any other aternative, right?
how are the modules gonna be fetched, when they're natively supported - as async AJAX calls from the browser?
ES6 modules is an ES6 feature, obviously. When I look at kangax compatibility table, I don't see such row (for ES6 modules) at all, why is that?
There's an issue being discussed on kangax's github.
the only way to use ES6 right now is to use a build tool, such as babel, browserify or any other aternative, right?
No. There is also a polyfill by Guy Bedford at http://github.com/ModuleLoader/browser-es-module-loader.
And there's already the preview release of Edge that implements it natively.
how are the modules gonna be fetched, when they're natively supported - as async AJAX calls from the browser?
Yes but not exactly: they will be fetched when the are used for the first time, by a call to an object (a function or a property) on the imported library.
Native modules are available in the following versions of browsers:
Safari 10.1
Chrome Canary 60 – behind the Experimental Web Platform
flag in chrome:flags.
Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config.
Edge 15 – behind
the Experimental JavaScript Features setting in about:flags.
source
Related
IE11 does not and will not implement ES2015 Proxy objects. Yet IE11's end of extended support is October 14, 2025.
Is there any way to polyfill Proxy objects for IE11? All other browsers support Proxy already.
If yes then we would all be able to use it in production today. If not then we'll have to wait almost a decade...
Edit: I'm asking specifically for IE11 as I know IE to usually have IE specific features that I'm often not aware of.
Edit2: I'm particularly interested in being able to implement a catch-all interceptor. Similar to __getattr__ in Python. It only has to work in IE11.
Best you can get is github: GoogleChrome/proxy-polyfill
According to Babel docs:
Due to the limitations of ES5, Proxies cannot be transpiled or polyfilled.
There's quite a concise answer for this question on Quora
Proxies require support on the engine level and it is not possible to polyfill Proxy.
Most major JS engines have yet to implement support. Check out the ECMAScript 6 compatibility table.
You may want to use Object.observe instead, possibly with polyfills for browsers other than Chrome, but even then the proposal has been withdrawn, and it has been announced it will be removed from Chrome in a future version.
I personally haven't tried the Object.observe solution but it might be a good place to start.
Good luck!
EDIT:
Thank you to Matt Jensen in the comments for pointing out there is infact a way to polyfill some parts of ES6 Proxy using this package: github.com/GoogleChrome/proxy-polyfill
AWESOME
Direct solution for polyfilling ES6 Proxy in environments without support this feature, of course is impossible - if storing some polyfill function info window.Proxy is meant. But if thinking this way, most modern features of ES6 can't be supported, because they will raise syntax error for old-version ECMAScript engine.
That's why you should use transpiler, which perform preceding wrapping ES6 code into specific constructions, and then evaluate transformed code on old engine. In current case, just use one Babel plugin: https://www.npmjs.com/package/babel-plugin-proxy
Of course, while using this solution, you should configure Webpack to segregate target bundles for different client agents / browsers, depending on it's feature set discovery. See details here: https://gist.github.com/newyankeecodeshop/79f3e1348a09583faf62ed55b58d09d9
I don't understand the best way to use "let" keyword...
In IE11 and Chrome45 I can use it fine
In Safari8.0.4, like in older versions of Chrome, it gives the error "unexpected use of reserved word 'let'"
In Firefox the let keyword only works inside <script type="application/javascript;version=1.7"/>, but this script type isn't even recognized as Javascript in IE11, Chrome45, Safari8.
Here's a JSFiddle that shows it in action: https://jsfiddle.net/p6cgtyg6/1/
So -- I don't mind requiring users to use modern versions of their browsers.
And I don't mind excluding Safari if there honestly is no version of Safari that supports this keyword. (Is that really true? Why does everyone spend all their time griping about IE when Safari seems so much worse in ES6 terms? Have I missed something?).
But how should I allow "let" to work in Firefox while not preventing Chrome/IE? (I haven't yet found links from people griping about how Firefox script tag behaves differently from Chrome, and I'd have expected more complaints, so I figure I must have missed something obvious...)
Concerning Safari 8, it's just not supported ; for that browser, I'd recommend using Babel.
If you have the gut feeling that this bug won't be fixed anytime soon* then you could have a script that detect Firefox which would then inject your script(s) with the appropriate value for the type attribute.
As a side note, I would advise not to use let blocks—unless you wanna use this transpiler—nor let expressions which will be dropped.
* fixed in Firefox 44
let is a part of ECMAScript 6 specification, and ECMAScript 6 itself is in 'draft' status. Even in its incomplete form its features aren't supported fully by actual browser versions.
Since you want to dive into ES6 today for production, your best bet is to use ES6 to ES5 transpiler, most prominent ones are Babel and Traceur, which are available as both CLI and packages for the build system of your choice. There are online tools for Babel and Traceur to try them out. And Scratch JS extension for Chrome uses both Babel and Traceur and is excellent for developing and compiling ES6 scripts if the build system is not an option.
Here is up-to-date comparison table that embraces ES6 feature support in both browsers and ES6 compilers.
And here is a great collection of ES6-related tools.
See browser compatability of this ES6 keyword.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Browser_compatibility
Also see this SO post for ES6 feature detection.
Is Node.js supporting => function keyword alias already? If yes, starting from which version? How to enable this language extension?
(function() { console.log('it works!') })()
Becomes
(() => { console.log('it works!') })()
In short: yes, arrow functions are reasonably well supported in Node.js since version 4.4.5.
Completely correct support starts with version 6. Initial support was introduced as far as v0.12 but is was very incomplete and disabled by default until v4.0 when it got better. See Node's ES6 compatibility table for details: http://node.green/#ES2015-functions-arrow-functions.
The syntax you're referring to is "arrow function" syntax. It is a feature of ECMAScript 6, also known as "Harmony". The ES6 standard is now finalized, but engines are still implementing its new features.
The V8 now has arrow function support. Node runs on the V8 engine, but it can take some time for Node to incorporate the latest version into its code base.
Whenever it is added, it might possibly be enabled only via a --harmony command-line flag.
You can follow this issue: https://code.google.com/p/v8/issues/detail?id=2700
Currently (as 02.05.2014) arrow functions have been implemented and waiting until this functionality will be landed in v8: https://codereview.chromium.org/160073006/
After then we'll need to wait, until v8 version with arrow function would be integrated into Node.JS. You can follow Node.JS changelog there: https://github.com/joyent/node/blob/master/ChangeLog (search for "v8: upgrade to ....")
kangax's compatibility tables can keep you up-to-date with what is currently available in Node.
Experimental features can be enabled using the instructions on this page:
All shipping features are turned on by default on Node.js
Staged feature require a runtime flag: --es_staging (or its synonym, --harmony)
In progress features can be activated individually by their respective harmony flag (e.g. --harmony_destructuring) but this is highly discouraged
I've been working with KoaJS for a while, and we can easily use the 'let' keyword and the generators when using the --harmony flag but I couldn't find how much support for does the node v0.11.x provides while using the same.
I tried using the default value argument initialization but couldn't succeed.
Is there any source available which can list the no of features of ECS 6 supported in node v0.11.x using the harmony flag? Or if there is any npm module available for node that might allow me to use the same?
Thanks in advance.
With regards to your second question, yes, there is es6-module-loader.
For a long list of transpilers, shims, and other tools for using full ES6 features now, see addyosmani's ECMAScript 6 Tools page.
As for native ES6 support in node.js, V8 officially implements "ECMAScript" but AFAIK the V8 project doesn't release a spec of their implementation.
However there are some sources of useful information out there.
Here's a brief overview of ES6 in node.js v0.11.6.
You may want to determine the version of V8 that your version of node.js uses.
See the node.js blog for recent changelog info.
It can also be useful to find the version of V8 used in a given Chromium release.
The Chrome release notes can be found here.
Keep in mind that different flags can be set for the same version of V8.
Chromium and node.js both have ways to set flags in V8 related to ES6 support.
Here are two tables that list ES(6) feature support across implementations:
http://pointedears.de/scripts/test/es-matrix/
http://kangax.github.io/compat-table/es6/
This MDN page lists a set of reference articles for ES6 language features.
At the bottom of each one you can see the status of Chrome support for that feature (and using V8 versions determine the support in node.js).
Finally, the V8 issue tracker
provides a list of issues related to ES6 features, many of which have been implemented and their issues closed.
You can use ~96% of ES6 features in Node.js 6. You can review support for all versions on http://node.green/
This does not concern node 0.11, but in the current 5.8.0, you can use --harmony_default_parameter.
It it scheduled to be included by default in v6.0.
Is Node.js supporting => function keyword alias already? If yes, starting from which version? How to enable this language extension?
(function() { console.log('it works!') })()
Becomes
(() => { console.log('it works!') })()
In short: yes, arrow functions are reasonably well supported in Node.js since version 4.4.5.
Completely correct support starts with version 6. Initial support was introduced as far as v0.12 but is was very incomplete and disabled by default until v4.0 when it got better. See Node's ES6 compatibility table for details: http://node.green/#ES2015-functions-arrow-functions.
The syntax you're referring to is "arrow function" syntax. It is a feature of ECMAScript 6, also known as "Harmony". The ES6 standard is now finalized, but engines are still implementing its new features.
The V8 now has arrow function support. Node runs on the V8 engine, but it can take some time for Node to incorporate the latest version into its code base.
Whenever it is added, it might possibly be enabled only via a --harmony command-line flag.
You can follow this issue: https://code.google.com/p/v8/issues/detail?id=2700
Currently (as 02.05.2014) arrow functions have been implemented and waiting until this functionality will be landed in v8: https://codereview.chromium.org/160073006/
After then we'll need to wait, until v8 version with arrow function would be integrated into Node.JS. You can follow Node.JS changelog there: https://github.com/joyent/node/blob/master/ChangeLog (search for "v8: upgrade to ....")
kangax's compatibility tables can keep you up-to-date with what is currently available in Node.
Experimental features can be enabled using the instructions on this page:
All shipping features are turned on by default on Node.js
Staged feature require a runtime flag: --es_staging (or its synonym, --harmony)
In progress features can be activated individually by their respective harmony flag (e.g. --harmony_destructuring) but this is highly discouraged