how can I use babel polyfill to support all IE11 issues with gulp
13,168
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'));
});
Author by
turbo2oh
Updated on July 26, 2022Comments
-
turbo2oh almost 2 years
I've been piecing together support for IE11 by adding plugins for
transform-object-assign
andarray-includes
and now I'm getting a symbol error for usingfor 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()); }
-
turbo2oh about 8 yearswill the
transform-es2015-classes
cover thefor..of
symbol error? Is browserify necessary? -
glued about 8 yearsi believe its useful for bundling it with the polyfill and using import statements
-
glued about 8 yearsheres the webpack equivalent: gist.github.com/glued/e600aec12968c3fec7cb7d95d1dbb74e