【gulp打包】使用gulp+babel打包处理es6转换为es5, 包括es6中Symbol对象

》》》》【问题】在使用gulp打包的项目中，引入了一些采用es6语法编写的js文件。导致在一些浏览器中识别不了出错，例如IE和搜狗。

》》》》【解决】使用babel做了处理。

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

1、 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

2、 在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'))

})；

3、 新增文件.babelrc的内容如下：

{ 
“presets”: [“env”] 
}

但是使用这种方法后我还是出现了Cannot find module '@babel/core'的问题。初步猜想应该跟我的node版本有关。然后使用了第二种方法。

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

1、 cd进入项目下，然后安装包（语句与上步骤中语句相似，替换包名即可），gulpfile.json中

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

2、 然后进入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

1、 cd进入项目目录，安装包：

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

cnpm install --save-dev babel-polyfill

2、 在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'))

})；

3、 但是到这一步我编译后并没有任何作用，IE浏览器下同样还是出现Symbol识别不了。所以在我的index.html主工程文件中需要使用去加载node_modules的babel-polyfill文件。

至此即可解决我的问题。

注意，因为我的工程中采用seajs打包，所以es6转换的task任务需要在seajs任务之前进行，否则会报错。