如何在gulp项目中优雅的使用ES6

安装

第一步就是要安装gulp-babel

npm install --save-dev gulp-babel

使用

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

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

创建 .babelrc 配置文件

到刚才那一步，babel并不能成功运行，这时候需要在项目根目录添加一个.babelrc文件，启用一些插件，接下来再安装一个插件

npm install babel-preset-env --save-dev

安装成功后，在.babelrc文件中这样写

{
  "presets": ["env"]
}

我在实际使用过程中发现了，以上的配置并不能转换解构赋值的特性，所以还需要安装另一个插件

npm install babel-preset-stage-0 --save-dev

在.babelrc文件中这样写

{
  "presets": ["env", "stage-0"]
}

一切正常运行。