一、安装
1、首先要安装gulp-babel、babel-core、babel-preset-es2015这三个插件
下面这种安装方法,安装的不是最新的插件,往下读,会明白原因,以及如何安装最新的。
npm install gulp-babel@7 --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
2、gulp-babel要指定版本号
npm上查看:gulp-babel的使用和版本号,文档会介绍不同的版本依赖安装
7.0的gulp-bable依赖6.0的babel-core;
8.0的gulp-babel依赖7.0的@babel/core;
因为npm上gulp-babel的最新版本为8.0.0,不指定版本号,默认会安装最新版的。
3、babel-core和@babel/core的区别
babel-core在7.0 之后,包名升级为 @babel/core,所以在我们没有指定版本号的时候下
安装babel-core的实际上是安装的最后版本的babel-core,版本为6.26.3
安装的 @babel/core实际上是最新版本的,版本号为7.9.6
npm上查看:最新版的@babel/core
npm上查看:最新版的babel-core
二、配置
在项目根目录下,即与.gulpfile文件同一目录,创建.babelrc文件
设置内容为:
{
"presets": ["es2015"]
}
三、使用
1、在gulpfile中,引入插件
var babel =require("gulp-babel")
2、创建task任务
.pipe(babel())就是转换es6为es5
gulp.task('uglify', function(done){
gulp.src('./src/js/**/*.js')
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
done()
})