How to install babel and using ES6 locally on Browser?

Question

So, I am following tutorial to learn ES2015 on here:

http://k33g.github.io/2015/05/02/ES6.html

But, I don\'t find this file based on that tutorial:

<         


        

Answer 1

Since babel 6.2.0 browser.js has been removed.

Following Babel documentation, you have two options:

1. Use babel-standalone:

It is a standalone build of Babel for use in non-Node.js environments, including browsers. It is a replacement of babel-browser and is used in the official Babel repl

2. Bundle your own file:

Use a bundler like browserify/webpack and require directly babel-core npm module and make sure to configure correctly browserify or webpack to avoid error due to pure node dependencies and so on.

Example of config using webpack (I left only the one specific):

{
    ...
    module: {
      loaders: [
        ...
        {
          loader: 'json-loader',
          test: /\.json$/
        }
      ]
    },
    node: {
      fs: 'empty',
      module: 'empty',
      net: 'empty'
    }
}

Then in your code:

import {transform} from 'babel-core';
import es2015 from 'babel-preset-es2015';
import transformRuntime from 'babel-plugin-transform-runtime';

...
transform(
        /* your ES6 code */,
        {
          presets: [es2015],
          plugins: [transformRuntime]
        }
      )
...

Note that plugins and presets need to be required from the code and can't be passed as string option.