JS2015 on web pages with Babel (in 5 steps)

Use JS2015 (former ES6) on regular web pages with Babel and Browserfy with these 5 simple steps.

Our files:

1. Check if npm is installed:

2. Install Babel modules:

3. Transpile to ES2016:

Be aware of spaces in the brackets!

4. Use the transpiled file instead:

5. Repeat step 3 whenever you change your JS files

Alternatively, use Grunt to automate all this. Grunt can watch for file changes on your JS files and automatically transpile and change the "src" reference in your index.html.

And that's it!

Using with React

UPDATE: As for 2019, I strongly suggest you to use the create-react-app tool instead of this. The solution below was written on a time that this tool didn't exist.

1. Install ReactJS (if you didn't yet):

2. Install ReactJS module:

3. Transpile with:

Common problems:

  1. If you see this error message:

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Then, you have used wrong spacing in the brackets.

Close Menu