如何使用babel polyfill来支持所有IE11问题 [英] how can I use babel polyfill to support all IE11 issues with gulp

问题描述

通过为 transform-object-assign 和 array-includes 添加插件，我一直在拼凑IE11的支持>现在我得到了循环使用的符号错误。而不是一次一个地解决它们，我是否有可能将babel polyfill工作到我的构建中，并且将来可以证明它？

我已经阅读了几个相关的问题，但仍不清楚如何将babel-polyfill纳入下面的gulp构建中：

  return gulp.src（input）//获取输入文件
 .pipe（$。babel（{
 presets：['es2015 ']，//使用Babel 
插件将[ES6转换为ES5] ['transform-object-assign'，'array-includes'] 
 
）））
 .pipe $ .concat（outputFile））
 .pipe（$。uglify（{
 compress：{
 drop_debugger：true 
} 
}））
。管道（gulp.dest（paths.output））//输出文件目标
 .pipe（$。connect.reload（））; 
 
  

解决方案

我注意到了babel-polyfill和IE的一个问题，当我回复到这个npm包babel-polyfill：6.5.0时，一切开始正常工作

/ Edit

您是否使用browserify？你还需要 babel-polyfill 和插件 ['transform-es2015-classes'，{loose：true}]]
$ p

 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'））
 .ip（buffer（））
 .pipe（sourcemaps.init（{loadMaps：true}））
 .pipe（uglify（{mangle：false}））
 .pipe（sourcemaps .write（'./'））
 .pipe（gulp.dest（'./ build'））; 
}）; 
  

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'));
  });

这篇关于如何使用babel polyfill来支持所有IE11问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！