最近在公司的一個老項目是起一個特性的時候發(fā)現(xiàn)沒有不用ES6寫前端代碼賊蛋疼，于是決定在項目中引入ES6。因為公司原來使用gulp 搭建的開發(fā)環(huán)境，因此這里總結(jié)下gulp環(huán)境下引入babel的方法。
首先安裝4個gulp插件：

npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install babel-core --save-dev
npm install gulp-babel --save-dev
npm install gulp-remove-use-strict  //這個是用于去掉嚴格模式用的，不要用的話可以不安裝

然后在gulpfile.js文件中加入以下代碼：

//es6轉(zhuǎn)es5 去除嚴格模式
gulp.task('babel',function(){
    gulp.src(['app/js/views/**.js'])   
    .pipe(babel({
        presets: ['@babel/env', {
            "sourceType": "script"
        }],
        "plugins": [
            "transform-remove-strict-mode"
        ]
    }))
    .pipe(removeUseStrict())
    .pipe(gulp.dest('./app/js/viewsdist'))
});

//es6轉(zhuǎn)es5 嚴格模式
gulp.task('babel',function(){
    gulp.src(['app/js/views/**.js'])   
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(gulp.dest('./app/js/viewsdist'))
});

其中，src后面的數(shù)組跟著的是ES6文件存放的路徑，gulp.dest后面跟著的是輸出路徑。
然后在命令行中輸入 gulp babel即可在輸出目錄看到結(jié)果。
要吐槽的是照著gulp-remove-use-strict這個插件的官網(wǎng)例子打一遍既然沒效果，折騰了我半天時間?。?！