》》》》【问题】在使用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文件。
至此即可解决我的问题。