How to use babel-polyfill in gulpfile.js

Question

In the Babel docs, they just say enable import "babel-polyfill"; so that I can use ES6 generators but after I include this line in my gulpfile.js, I still throw an exception: Uncaught ReferenceError: regeneratorRuntime is not defined This is my gulpfile.js

 import 'babel-polyfill'; var gulp = require("gulp"), babel = require("gulp-babel"), concat = require('gulp-concat'), rename = require('gulp-rename'), uglify = require('gulp-uglify'); gulp.task("babel", function() { return gulp.src(jsSrc) .pipe(concat('Main.js')) .pipe(babel()) .pipe(gulp.dest(jsDest)) .pipe(rename('Main-min.js')) .pipe(uglify()) .pipe(gulp.dest(jsDest)); }); 

jsSrc have maines6.js and other .js files. In maines6.js here is my generator:

 function* anotherGenerator(i) { yield i + 1; yield i + 2; yield i + 3; } 

I don’t know how to use it .. can you help me?

Answer 1

Since you are just using gulp and not some kind of module node (like a web package)

You should follow this guide https://github.com/babel/gulp-babel#runtime

 npm install --save-dev babel-plugin-transform-runtime 

and then use it like this:

 .pipe(babel({ plugins: ['transform-runtime'] })) 

Gotta do the trick :)

EDIT:

It seems that babel-plugin-transform-runtime add requires calls to the converted file, so I think you will need to use the module loader. I would suggest webpack, although there are alternatives like browserify and jspm.

You will need

 npm install -g webpack npm install babel-loader babel-core babel-polyfill babel-preset-es2015 --save-dev 

Then you need to create the webpack.config.js file. Here is a very primitive setup.

 module.exports = { context: __dirname + '/app', entry: ['babel-polyfill', './entries/index.js'], output: { path: 'dist', filename: '[name].js' }, module: { loaders: [ { test: /\.js/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015'] } } ] } }; 

With the configuration above, the file structure should look like this:

 project/ node_modules/ app/ entries/ main.js dist/ main.js webpack.config.js package.json 

Then just start webpack from the command line. If you want to run the webpack -p mini version webpack -p

Answer 2

To enable polyfill, you need to require it at the top of the entry point into your application.

import 'babel/polyfill' will need to go to the beginning of the jsSrc recording file