Documentation: How to use polyfills

[sf-steve]

I am failing miserably to get gulp-babel to pollyfil instance methods such as Array.prototype.includes

Looking through the internet, i see various docs, such as https://babeljs.io/docs/en/usage/#polyfill but no indication of how to use this with gulp-babel

I have a very basic setup:

package.json

{
    ...
      "dependencies": {},
      "devDependencies": {
        "@babel/core": "^7.14.8",
        "@babel/preset-env": "^7.14.8",
        "gulp": "latest",
        "gulp-autoprefixer": "latest",
        "gulp-babel": "^8.0.0",
        "gulp-clean-css": "latest",
        "gulp-concat": "latest",
        "gulp-minify": "latest",
        "gulp-rename": "latest",
        "gulp-sass": "latest"
      },
    ...
}

gulpfile.js

var themepath = "xx"
var gulp = require('gulp');
var babel = require('gulp-babel');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var minify = require('gulp-minify');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');


gulp.task('js', function () {
	return gulp.src(themepath + 'assets/src/js/**/*.js')
		.pipe(concat('main.js'))
		.pipe(babel({
			presets: ['@babel/preset-env']
		}))
		.pipe(minify({
			ext: {
				min: '.min.js'
			}
		}))
		.on('error', handleError)
		.pipe(gulp.dest(themepath + 'assets/dist/js'))
});

After running the js task, dist/js/main.js will have arrow functions converted to ES5, but calls to Array.prototype.includes will stll exist, and there is no pollyfil code either.

I can of course get around this issue by manually copying selected polyfills into a polyfills.js file in the js folder, but this is prone to errors, and somewhat negates the purpose of using babel in the first place.

I expect this is a symple config issue, that could be solved by a document update. I (and many other internet strangers) would appreciate it if this can be solved