在gulp中使用babel-polyfill

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 

 

 

使用到这一部的时候,实际上已经合并压缩文件了,但是在浏览器端引入这段JS却显示 require is not defined ; 

原因是合并中的JS源文件中有require(""),换句话说,babel只会把文件转化为commonJs语法;浏览器当然无法使用; 

网上找了好多答案,不知道是没有理解还是怎么的,都说要使用webpack或者browserify工具进行转化.好吧,开始再次学习下webpack;