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

Posted 2021-04-08 前端手艺工坊

安装

第一步就是要安装gulp-babel

1	npm install --save-dev gulp-babel

使用

1 2 3 4 5 6 7 8

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文件，启用一些插件，接下来再安装一个插件

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

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

1 2 3

{  "presets": ["env"] }

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

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

在.babelrc文件中这样写

1 2 3

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

一切正常运行。