【gulp打包】使用gulp+babel打包處理es6轉換爲es5, 包括es6中Symbol對象

》》》》【問題】在使用gulp打包的項目中，引入了一些採用es6語法編寫的js文件。致使在一些瀏覽器中識別不了出錯，例如IE和搜狗。

》》》》【解決】使用babel作了處理。

使用方案一：gulp-babel + babel-preset-env + babel-core

一、 cd進入項目下，依次安裝：

cnpm install gulp --save-dev
cnpm install gulp-babel --save-dev
cnpm install babel-preset-env --save-dev
cnpm install babel-core --save-dev

二、 在gulpfile.js中引入並使用：

var gulp = require('gulp');

var babel = require('gulp-babel');


gulp.task('es6', function(){

    return gulp.src('src/js/*.js')

        //將ES6代碼轉譯爲可執行的JS代碼

        .pipe(babel())

         .pipe(gulp.dest('dist/static/scripts'))

})；

三、 新增文件.babelrc的內容以下：

{ 
「presets」: [「env」] 
}

可是使用這種方法後我仍是出現了Cannot find module '@babel/core'的問題。初步猜測應該跟個人node版本有關。而後使用了第二種方法。

方案二 gulp-babel + babel-preset-es2015

一、 cd進入項目下，而後安裝包（語句與上步驟中語句類似，替換包名便可），gulpfile.json中

"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"babel-preset-es2015": "^6.5.0"

二、 而後進入gulpfile.js中使用：

var gulp = require('gulp');

var babel = require('gulp-babel');


gulp.task('es6', function(){

    return gulp.src('src/js/*.js')

        .pipe(babel({
                presets: ['es2015']
        }))
         .pipe(gulp.dest('dist/static/scripts'))

})；

注意，若使用了上一個方法新建了文件.babelrc，這裏須要刪除，不然會出錯。

》》》》【問題】在使用上述方法後，仍然會有錯誤，顯示識別不了Symbol對象。
》》》》【解決】使用babel-polyfill

babel-polyfill + babel-plugin-transform-runtime

一、 cd進入項目目錄，安裝包：

cnpm install --save-dev babel-plugin-transform-runtime

cnpm install --save-dev babel-polyfill

二、 在gulpfile.js任務中：

require('babel-polyfill');     //放在第一行;

var gulp = require('gulp');

var babel = require('gulp-babel');


gulp.task('es6', function(){

    return gulp.src('src/js/*.js')

        .pipe(babel({
                presets: ['es2015'],
            plugins: ['transform-runtime']
        }))
         .pipe(gulp.dest('dist/static/scripts'))

})；

三、 可是到這一步我編譯後並無任何做用，IE瀏覽器下一樣仍是出現Symbol識別不了。因此在個人index.html主工程文件中須要使用去加載node_modules的babel-polyfill文件。

至此便可解決個人問題。

注意，由於個人工程中採用seajs打包，因此es6轉換的task任務須要在seajs任務以前進行，不然會報錯。