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:


    

import flashMessage from './import-this-file.js';
class Test {
  constructor(msg) {
    alert(msg);
  }
}

flashMessage('Hello');
let x = new Test('World');
export default function(msg) {
  alert(msg);
}

1. Check if npm is installed:

npm --version

2. Install Babel modules:

npm init
npm install babel-cli babel-preset-es2015 browserify babelify --save-dev

3. Transpile to ES2016:

browserify app.js -o app-es2016.js -t [ babelify --presets [es2015] ]

Be aware of spaces in the brackets!

4. Use the transpiled file instead:


    

5. Repeat step 3 whenever you change your JS


And that’s it!


Using with React

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

npm install react react-dom --save

2. Install ReactJS module:

npm install babel-preset-react --save-dev

3. Transpile with:

browserify app.js -o app-es2016.js -t [ babelify --presets [es2015 react] ]

Common problems:

ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’
You used wrong spaces in the brackets.

Close Menu