【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任务以前进行，不然会报错。