Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
109 lines (89 sloc) 5.1 KB

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
    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:
    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
    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
    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
    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
    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: