tilmanschweitzer/es6-setup

Outdated: Minimal example setup for ES6 with the Babel transpiler and a simple grunt "dev" task for watch, connect and livereload.

es6-setup

Minimal example setup for ES6 with the Babel transpiler and a simple grunt "dev" task for watch, connect and livereload.

Setup

All you need is node with npm and grunt-cli.

# install the setup depedencies
npm install

# install grunt-cli globally (if you don't have it installed)
npm install -g grunt-cli

# check the grunt default task...
grunt

# ... and the dev task
grunt dev

Setup Evolution

• Just Grunt+Babel
  • Manual transpilation for src/app.js with the grunt default task
  • Add some ES6 code to src/app.js and transpile it
• Dev-Task with watch and connect - Diff - Just the changes
  • Run grunt dev (http://localhost:9001 should open automatically)
  • Change some code in src/app.js or index.html
• Module loader setup with SystemJS - Diff - Just the changes
  • Re-run grunt dev
  • Add some modules like src/my-module.js
  • Add a class and export it export {MyClass}; class MyClass {};
  • Import it in src/app.js with import {MyClass} from './my-module.js'; var o = new MyClass();
  • And now with wildcard imports import * as myModule from './my-module.js'; var o = new myModule.MyClass();

Ressourcen

• Babel Transpiler
  • Babel - Kurzer Feature Überblick und Babel Kompatibilität
  • Babel - Try it out
• ES6 Overview in 350 Bullet Points
• Getting started with ECMAScript 6
• Six Steps for Approaching the Next JavaScript