Turn ES6 code into vanilla ES5 with no runtime required using babel;

$ npm install --save-dev babel-loader

import Animal from 'babel!./Animal.js';

class Person extends Animal {
  constructor(arg='default') {
    this.eat = 'Happy Meal';
  }
}

export default Person;

var Person = require('babel!./Person.js').default;
new Person();

Or within the webpack config:

module: {
    loaders: [
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
    ]
}

and then import normally:

import Person from './Person.js';

Make sure you are transforming as few files as possible. Because you are probably matching /\.js$/, you might be transforming the node_modules folder or other unwanted source. See the exclude option in the loaders config as documented above.

babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it.

You can instead require the babel runtime as a separate module to avoid the duplication.

The following configuration disables automatic per-file runtime injection in babel, instead requiring babel-runtime and making all helper references use it.

See the docs for more information.

NOTE: You must run npm install babel-runtime --save to include this in your project.

loaders: [
  // the optional 'runtime' transformer tells babel to require the runtime instead of inlining it.
  { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?experimental&optional=runtime' }
]

See the babel options

MIT © Luis Couto