Awesome

ECMAScript 6

Support Hints & Examples

This is a small collection of hints and examples to show how ECMAScript 6 can be used today in practice in various scenarios, thanks to the awesome Babel transpiling toolkit. If you want to find out more about ECMAScript 6 check out our companion project es6-features.org, too.

Code Examples

The following are code examples how to use ECMAScript 6 for your own code:

• app-browser-onthefly<br/> This shows a browser application, using on-the-fly transpiling. The key points are: it includes Babel's browser.js (which is a Browserify'ed Babel distribution) and then includes the ES6 application code app.js with MIME-type text/babel instead of text/javascript. This is not recommended for production scenarios.

• app-browser-buildproc:<br/> This shows a browser application, based on a Grunt-based build process. The key points are: Grunt uses Browserify which itself uses the Browserify plugin Babelify to transpile ES5 to ES6 with Babel. This is recommended for production scenarios.

• app-node-buildproc<br/> This shows a Node.js/IO.js-based server application, based on a Grunt-based build process. The key points are: Grunt uses its plugin Grunt-Babel transpile ES5 to ES6 with Babel. This can be used for production scenarios.

• app-node-onthefly<br/> This shows a Node.js/IO.js-based server application, using on-the-fly transpiling. The key points are: it uses an ES5-based boot script app.js which activates Babel's require hook which on subsequent require calls on-the-fly transpiles all ES6 to ES5 code. This can be used for production scenarios, as server startup times usually do not matter such much.

• grunt-onthefly<br/> This shows a Grunt-based build process where ES6 is used for the build script. The key points are: it uses an ES5-based boot script Gruntfile.js which activates Babel's require hook which on subsequent require calls on-the-fly transpiles all ES6 to ES5 code. This can be used for production scenarios.

• lib-node-browser-buildproc<br/> This shows a library for use within Node.js/IO.js-based server environments or within browser environments. It is based on a Grunt-based build process. The key points are: Grunt uses JSHint (with its esnext option enabled) and ESLint (with the Babel-ESLint plugin activated) to lint all ES6 sources. Then it uses Browserify, which itself uses the Browserify plugin Babelify, to transpile all ES5 library code to ES6 with Babel. Additionally, it uses the plain Grunt-Babel plugin to transpile Mocha-based ES5 test code to ES6 with Babel. This is recommended for production scenarios.

Tool Support

The following are hints for using ECMAScript 6 with various tools:

• WebStorm: WebStorm IDE version 10 supports ECMAScript 6 out-of-the-box.

• Sublime Text: Sublime Text editor version 3 supports ECMAScript 6 with the PackageControl-installable plugins JavaScriptNext plus the SublimeLinter & SublimeLinter-jshint plugin combination.

• Vim: Vim editor version 7 supports ECMAScript 6 with the Vundle-installable plugins pangloss/vim-javascript and the combination of plugin Syntastic and an external JSHint.

• Atom: Atom editor supports ECMAScript 6 with the language-javascript-better extension plus the combination of linter and linter-jshint extensions.

• Brackets: Brackets editor supports ECMAScript 6 with the brackets-jshint extension.