Today I Learned

hashrocket A Hashrocket project

Transforming ES6 and JSX with Babel 6

With Babel 5, transforming ES6 and JSX into ES5 code was accomplished by including the babel-loader. This would be configured in webpack.config.js with something like the following:

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

Now, with Babel 6, the different parts of the loader have been broken out into separate plugins. These plugins need to be installed

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

and then included as presets

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      },
    }
  ],
},

Alternatively, the presets can be specified in the project's .babelrc file.

Source

See More #javascript TILs
Looking for help? At Hashrocket, our JavaScript experts launch scalable, performant apps on the Web, Android and iOS. Contact us and find out how we can help you.