在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;