async/await with webpack+babel

.babelrc

{
  "presets": ["es2015"],
  "plugins": ["transform-async-to-generator"]
}

index.js

async function foo() {
  console.log('async working!')
}

async function bar() {
  await foo()
  console.log('after foo')
}

bar()

package.json

{
  "name": "async-await",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-async-to-generator": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "webpack": "^1.12.13"
  }
}

webpack.config.js

module.exports = {
  entry: ['babel-polyfill', './index.js'],
  output: {
    filename: 'bundle.js'
  },
  devtool: 'sourcemap',
  module: {
    loaders: [{
      test: /\.js?$/,
      exclude: /(node_modules)/,
      loader: 'babel'                                              
    }]
  }
}

This worked and is more concise than http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/. Thanks!

also for .eslintrc:

{
    "parserOptions": {
        "ecmaVersion": 8 // or 2017
    },
    "rules": {}
    }
}

If you want to be lazy... babel-preset-2017 includes babel-plugin-transform-async-to-generator.

Also, babel-preset-latest includes babel-preset-2015, babel-preset-2016 and babel-preset-2017.

@johnsoftek be aware that babel-preset-2017 doesn't work for older versions of safari and firefox, so a solution with async and es2015 will be necessary

Thanks

Is polyfill necessary ?

Wondering if polyfill is necessary also.

Its necessary if your wanting to use certain features - Im having to add it to include the async await features

how about babel 7 ???

every link I checked using the previous version of babel for doing this such thing

We need to use @babel/preset-env which transforms syntax. We need to use @babel/transform-runtime to avoid duplicate code, and config core-js: 3 to polyfill.

babel-plugin-transform-runtime automatically injects Regenerator where generators or async/await are used.

So, installing babel/runtime and @babel/plugin-transform-runtime need to be installed