Simple client-side project for learning ES6

Diode
, , , , ,

This tutorial is for those who are not familiar with nodejs, but wants to get started with ES6.

ES6 is not fully supported by all the browsers. So Babel is required to transcompile your ES6 code to ES5, but you don’t need to set up a server side for this. All you need is Babel Standalone

NOTE: Only for learning purposes.

Let us get started

Step 1 : Download Babel Standalone

Step 2 : Create a folder babel-simple and create subfolders app and lib. Copy downloaded babel script to lib. Now the folder structure will be

Step 3 : Create main.js in babel-simple/app.


Step 4 : Create main.css in babel-simple/app


Step 5 : Create index.html in babel-simple. Please note that text/babel is the type of the script tag that loads main.js.


That’s it. You are ready. Open index.html in a browser.
If your browser is giving cross origin errors, use Firefox, or you can set up a minimal server with nodejs and http-server.



Output





Download the project


What you can do with this

  1. Get started with ES6
  2. Learn basics
  3. Write single module ES6 app

What you can’t do with this

  1. Code cannot be split
  2. Modules cannot be loaded
  3. Not able to directly debug

UPDATE: For setting up an ES6 project with support for loading modules at runtime, please see the post ES6 , Babel and JSPM - The Super Combo #1

Share