I've been piecing together support for IE11 by adding plugins for transform-object-assign and array-includes and now I'm getting a symbol error for using for of loops. Instead of just tackling them one at a time, is it possible for me to work babel polyfill into my build below and future proof it?

I've read several related questions but still am not clear on how I'd fit babel-polyfill into the gulp build below:

return gulp.src(input)  // Grab the input files
        .pipe($.babel({
            presets: ['es2015'], // transform ES6 to ES5 with Babel
            plugins: ['transform-object-assign','array-includes']

        }))
        .pipe($.concat(outputFile))
        .pipe($.uglify({
            press: {
                drop_debugger:  true
            }
        }))
        .pipe(gulp.dest(paths.output))  // Output file destination
        .pipe($.connect.reload());
}

I've been piecing together support for IE11 by adding plugins for transform-object-assign and array-includes and now I'm getting a symbol error for using for of loops. Instead of just tackling them one at a time, is it possible for me to work babel polyfill into my build below and future proof it?

I've read several related questions but still am not clear on how I'd fit babel-polyfill into the gulp build below:

return gulp.src(input)  // Grab the input files
        .pipe($.babel({
            presets: ['es2015'], // transform ES6 to ES5 with Babel
            plugins: ['transform-object-assign','array-includes']

        }))
        .pipe($.concat(outputFile))
        .pipe($.uglify({
            press: {
                drop_debugger:  true
            }
        }))
        .pipe(gulp.dest(paths.output))  // Output file destination
        .pipe($.connect.reload());
}

• javascript
• gulp
• internet-explorer-11
• babeljs
• polyfills

1 Answer 1

Edit

I noticed an issue with babel-polyfill and IE, when i reverted to this npm package "babel-polyfill": "6.5.0" everything started working normally

/Edit

Are you using browserify? Also you'll need the babel-polyfill and the plugin ['transform-es2015-classes', { loose: true }]]

heres my gulp task for IE patibility with babel6:

gulp.task('pile', () => {
    browserify('./js/script.js', { debug: true })
    .add(require.resolve('babel-polyfill'))
    .transform(babelify.configure({presets: ['es2015'], plugins:['transform-es2015-classes', { loose: true }]]}))
    .bundle()
    .on('error', util.log.bind(util, 'Browserify Error'))
    .pipe(source('script.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify({ mangle: false }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./build'));
  });