Update 2015/11/08: This guide assumes you’re using Babel 5.
For Babel 6, see my new guides to Babel 6 & Webpack, and Babel 6 & NPM.

While Babel has great ES6 support and a few ES7 goodies, some of the most interesting proposals are still locked behind the “stage 0” wall. This is all well and good if you need to build code which you can guarantee will work without compilation in a few years time, but if that was the case, you probably wouldn’t be using any ES7 features at all. So given how curious you obviously are (after all, you’re reading this), let’s go ahead and unlock them.

Web Apps (with Webpack)

If you’re using Webpack to build your JavaScript, you’re probably using babel-loader. Your current configuration will probably look something like the one in webpack-black-triangle:

module: {
  loaders: [
    { test: /\.js$/, include: path.join(__dirname, 'src'), loader: 'babel-loader' },
  ]
},

To unlock stage 0 features, just add query: {stage: 0} to babel-loader‘s configuration object.

{ test: /\.js$/, include: path.join(__dirname, 'src'), loader: 'babel-loader', query: {stage: 0}},

Libraries (with package.json and the Babel CLI)

Even if you’re using Webpack for your main app, you might still have a few components which you keep in separate packages – like how I keep react-passthrough in a separate package which I can include across all my projects.

Seeing you don’t want Babel to compile anything in node_modules (and you don’t want any ES6/ES7 code on npm’s repository), you need to compile these separately. The cleanest way to do this is with the babel command line.

For example, if you’ve currently got a package.json similar to that from maxim:

"scripts": {
  "compile": "babel -d lib/ src/",
  "prepublish": "npm run compile"
},

All you need to do is add the --stage 0 flag to babel

"scripts": {
  "compile": "babel --stage 0 -d lib/ src/",
  "prepublish": "npm run compile"
},

New Projects (with webpack-black-triangle)

If you’d rather try ES7 in a new project, things get even easier. Just clone the stage-0 branch of webpack-black-triangle, download the dependencies, and get started:

git clone -b stage-0 https://github.com/jamesknelson/webpack-black-triangle.git new-project
cd new-project
npm install
npm start # start a server on localhost:8080

Once the server is up, open localhost:8080 and start coding amazing apps with decorators, class properties, object rest/spread properties and async/await!

Want some examples of how to use these? First try react-callback-register and it’s README. And then sign up to my mailing list! I give my subscribers all sorts of goodies, and have used ES7 in a number of them.

In return for your e-mail, you’ll also immediately receive 3 bonus print-optimised PDF cheatsheets – on React, ES6 and JavaScript promises.

More reading

• Autobuilding ES6 & LESS with 26 lines of configuration
• Babel’s Experimental page
• babel-loader