babel-polyfill
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign
)都不会转码。
也就是说如果项目的js文件中有Promise等全局对象,那么就算用 babel-preset-env 转化过后,代码中还是存在 Promise对象,对于兼容性并没有什么用;
网上并没有说清楚 babel-polyfill 究竟如何使用:直到在stackoverflow上看到:
gulpfile.js如下:
//前提安装npm install --save-dev babel-plugin-transform-runtime //前提安装npm install --save-dev babel-polyfill //以前相关其他的npm包; require('babel-polyfill'); //放在第一行; var gulp = require('gulp'); var uglify = require('gulp-uglify'); var cleanCss = require('gulp-clean-css'); var concat = require('gulp-concat'); var babel = require("gulp-babel"); gulp.task('concat-file', function () { gulp.src('src/js/*.js') .pipe(concat('all.min.js')) .pipe(babel()) .pipe(babel({ plugins: ['transform-runtime'] // babel-plugin-transform-runtime 在这里使用; })) .pipe(uglify()) .pipe(gulp.dest('dist/js')) .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); }) });
上个原图:只不过这个图(明明可以用的,为什么注释了呢),让我笑3秒: https://stackoverflow.com/questions/34744953/how-to-use-babel-polyfill-in-gulpfile-js