Using es7 functions with Babel

Question

I would like to include es7 functions in my project to start using fetch await asynchronous way in it.

I'm using gulp, browserify and babelify (7.2.0), reading some docs I saw that the way to say babelify to use es7 functions is including this line to the babelify transform:

optional: ['runtime', 'es7.asyncFunctions']

So that my whole gulp task is as follows:

gulp.task('js',function(){



var bundleStream = browserify({

    entries:[config.paths.mainJs],
    debug: true,

    transform: [babelify.configure({
        presets:["es2015","react"],
        optional: ['runtime', 'es7.asyncFunctions']
    })]


}).transform("browserify-shim")
    .bundle()
    .on('error',console.error.bind(console))




bundleStream
    .pipe(source('compiled.js'))
    .pipe(buffer())
   // .pipe(uglify())
    .pipe(rename('compiled.min.js'))
    .pipe(gulp.dest(config.paths.dist + '/js'))


});

Unfortunetely I'm getting the following error running the task:

"Unknown option: base.optional while parsing file:"

Googling a bit I saw that babelify 7.x does use babel 6.0 and apparently this parameter optional does not exist anymore in babel 6.0.

I don't want to downgrade my babelify version to make this work but instead I would like to include es7 functions with the version 7 of babelify, does someone know how to do it?

Any help would be very appreciated as there is no much info about it out there

Just in case, please find also my package.json file:

"dependencies": {
"bootstrap": "^3.3.5",
"history": "^1.13.0",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.4",
"jquery.easing": "^1.3.2",
"moment": "^2.10.2",
"react": "^0.14.3",
"react-bootstrap": "^0.28.1",
"react-dom": "^0.14.3",
"react-router": "^1.0.2",
"reflux": "^0.3.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babelify": "^7.2.0",
"browserify": "^9.0.8",
"browserify-shim": "^3.8.11",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.2.0",
"gulp-open": "^1.0.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.1",
"jest-cli": "^0.8.0",
"reactify": "^1.1.0",
"regenerator": "^0.8.42",
"streamify": "^0.2.5",
"uglify-js": "^2.4.20",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.1.2"
 },
"browser": {
"jquery": "src/main/webapp/js/libs/jquery-1.11.1.min.js",
"x": "./vendor/x.js"
 },
"browserify": {
"transform": [
  "browserify-shim"
]
 },
 "browserify-shim": {
   "jquery": "$"
   }

Answer 1

optional: ['runtime', 'es7.asyncFunctions']

was how you configure Babel 5. You are using Babel 6, so it would be

plugins: ['transform-runtime', 'transform-async-to-generator']

One thing to note is that configuring Babel via Babelify is not recommended. Instead, it is better to create an .babelrc file in the root of your application with JSON in it, e.g.

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

and npm install --save-dev babel-plugin-transform-runtime babel-plugin-transform-async-to-generator