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({
compress: {
drop_debugger: true
}
}))
.pipe(gulp.dest(paths.output)) // Output file destination
.pipe($.connect.reload());
}
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 compatibility with babel6:
gulp.task('compile', () => {
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'));
});