ES5 in Production, ES6 in Development

Many modern browsers already ship with ES2015 support, especially our favorite development browsers such as Chrome and Firefox. Still, our Babel configurations include the ES6 to ES5 transpilation step, and possibly even a number of polyfills. Can we use native ES6 in development environments without polyfills and code transforms?

Disabling ES6 Transpilation

Most of us use the ubiquitous es2015 preset in babel configuration. This preset is a good combination of commonly used transpilation settings, most of which we might not really need in modern browsers.

{
  "presets": [ "es2015"]
}

Commonly used es2015 preset is responsible for the transpilation settings

One plugin in particular we don’t want to lose – transform-es2015-modules-commonjs. This one is in charge of understanding our import and export statements. Let’s install it first:

npm i babel-plugin-transform-es2015-modules-commonjs --save-dev

Great! Now we can change our babel config (e.g. using the .babelrc file) to the following:

{
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

New babel configuration makes sure we only transform import/export statements

If your project uses React, then you can still include the react preset:

{
  "presets": [ "react"],
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

Babel 6 configuration that transforms JSX, but not ES6

Fantastic. Run your build process again and take a look at the transpiled code. If you run it in the latest version of Chrome or Firefox it should work.

ES6 in Development, ES5 in Production

Chances are our users won’t be running the latest browser so we’ll still have to make sure we compile the code for production. Babel 6 allows us to separate development and production settings using environment variables. I’ll update the code above to reflect this:

{
  "env": {
    "development": {
      "presets": [ "react"],
      "plugins": [ "transform-es2015-modules-commonjs" ]
    },
    "production": {
      "presets": [ "react", "es2015"]
    }
  }
}

Transform to ES5 in production, but keep ES6 in development

Development is the default environment in Babel so to make sure Production settings kick in, we’ll need to make sure our NODE_ENV or BABEL_ENV variables equal to production. Here’s one way we can accomplish that in *nix systems:

NODE_ENV=production npm start

Or

NODE_ENV=production npm start

Tell Babel to use production settings

That’s all there is to it. Enjoy development and debugging in a pure native ES6 environment.

What? My ES6 Code Doesn’t Work!

The approach above will only work in the following environments:

• Latest Chrome or Firefox
• If you use only ECMAScript features supported by your browser

Many boilerplate projects use additional settings that support ECMAScript proposals. These are known as stage-0 or above proposals. It could be that you’ve hit a feature that your browser doesn’t fully support or the support is buggy.

If you are unlucky or you use some of the [pretty cool] proposal features then you’ll have to add additional plugins to your configuration, or resort to the previous settings.

Conclusion

Unfortunately, we still can’t rely on native ECMAScript 6 for production, but at least we can use it in development. Please try this out and let me know how you liked debugging ES6 from your browser.