Using webpack without transforming es6 to es5 code

Question

I have a project that is just a few months old, and I decided to write it in ES6 to learn the new system. (Which I like a lot). The project is a sophisticated WebGL renderer.

Initially I simply used es6 in the browser, (not using the modules feature), and simply used lots of import statements in my HTML(ugly). This became unmanagable as the number of classes grew.

Now I am learning webpack and babel for the first time. My goal is to webpack all the modules together in either es5 or es6 format.

I have used webpack to transform my code to a single es5 (CommonJS) module. All functionality remains the same. Yay!

However, performance has been reduced quite significantly in some cases. Some of my code is running at half the speed now that it has been transformed to es5. (this goes against the data I see in this page https://kpdecker.github.io/six-speed/).

I would like to test using Webpack without transforming es6 -> es5. Essentially just leveraging webpacks ability to bundle my modules into a single file.

I am totally new to webpack, and I've been trying to mess with the way babel transforms my code, but can't figure out how to simply disable most of the transforms. The only thing I want transformed is the module import/exports.

Can anyone help me figure this out?

P.S. I do think my project points to es6 being much faster in some real world use cases than es5, and helps justify my decision to go with es6 from the beginning.

Answer 1

Rather than using a "preset" set of plugins (like "es2015") just use the transform-es2015-modules-commonjs plugin by itself.

Here's an example webpack config, but you could also do this in .babelrc:

// webpack.config.js
{
  module: {
    loaders: [
      {
        test: /\.js$/i,
        loader: 'babel',
        query: {
          plugins: ["transform-es2015-modules-commonjs"]
        }
      }
    ]
  }
}

That will transform import statements into require statements and export statements into module.exports = value statements ... and it won't do anything else. You can add in other transforms as you need them and everything else will be passed through as authored.

Answer 2

I guess you use babel-loader? Simply remove the babel loader on .js files in your Webpack configuration:

module: {
  loaders: [
    // Remove this:
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        presets: ['es2015']
      }
    }
  ]
}