CODEWITHSUNDEEP
reactjsecmascript-6webpack
Helgi Borg
Helgi Borg

Reputation: 876

How to bundle ES6 based React components and keep the bundle in ES6, using webpack?

How can I use webpack to bundle Reactjs components that use ES6? The resulting bundle should be in ES6, it should not be transpiled to ES5.

There are a lot of good Reactjs/webpack examples available but all that I've found transpile to ES5.

Upvotes: 2

Views: 815

Answers (2)

Helgi Borg
Helgi Borg

Reputation: 876

I found this very nice example on how to configure Webpack with React and more: https://github.com/krasimir/react-webpack-starter. It uses ES6, including ES6 imports, but transpiles down to ES5.

By hacking the babel preset, I managed to get it to spit out ES6 bundled code. I changed the file node_modules/babel-preset-es2015 to:

module.exports = {
  plugins: [
    require("babel-plugin-transform-es2015-modules-commonjs")
  ]
};

This is of course not an acceptable solution, what one needs to do is to find or create Bable preset that contains this.

The first thing I notice after this, was that UglifyJS doesn't support ES6. I suspect that there will be other issues down the road, so newbies like my self should perhaps stick to transpiling to ES5 a little bit longer.

Upvotes: 1

CodingIntrigue
CodingIntrigue

Reputation: 78525

Just run babel-loader without the ES2015 preset and add the transform-react-jsx plugin:

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        plugins: ['transform-react-jsx']
      }
    }
  ]
}

Upvotes: 2

Related Questions