ES6 初体验 —— gulp+Babel 搭建ES6环境
ES6已经火了好久了，我却一直没有在项目中尝试过使用ES6写代码，只是写过几个Demo，在大型项目中使用ES6这件事，我一直不太敢做。最近公司要求做一个小的H5活动专题，我想不如就在这个小项目中使用ES6，一方面积累一些经验为大型项目做准备。另一方面小型的活动专题不涉及后期维护，从成本上我并没有冒太大的风险。下面我简单介绍一下我搭建的ES6 环境。
虽然移动平台是webkit大行其道，并且webkit对ES6支持的还不错，但是我并不打算webkit内核裸跑ES6。我选择了预编译的方案——babel ，我编写的是ES6的代码，但是页面上仍然是ES5的代码。在网上查阅了不少文章结合我现在的开发环境我打算使用gulp-babel这个插件。下面我们一起来看一下：
需要哪些依赖？
下面是我的package.json中的devDependencies 属性：
1 "devDependencies": { 2 "babel-preset-es2015": "^6.5.0", 3 "gulp-load-plugins": "^1.1.0", 4 "gulp-babel": "^6.1.2", 5 "gulp-plumber": "^1.0.1", 6 "gulp-rename": "^1.2.2", 7 "gulp": "^3.9.1", 8 "gulp-jshint": "^2.0.0", 9 "gulp-concat": "^2.6.0", 10 "gulp-uglify": "^1.4.1", 11 "gulp-util": "^3.0.1" 12 }
npm install 后我们就可以看到我们的依赖都安装到了工程文件夹下面。
怎么配置？
然后是在gulp中做ES6的配置了gulpfile.js 。 我定义了一个名为“es6”的任务负责将目录src/es6js/ 下面所有的js文件通过babel编译成ES5的文件并输出到dist/ztimages 文件夹下面
1 var gulp = require('gulp'), 2 concat = require('gulp-concat'), 3 rename = require('gulp-rename'), 4 jshint = require('gulp-jshint'), 5 uglify = require('gulp-uglify'); 6 7 8 // Load plugins 9 var $ = require('gulp-load-plugins')(); 10 11 /* es6 */ 12 gulp.task('es6', function() { 13 14 return gulp.src('src/es6js/*.js') 15 .pipe($.plumber()) 16 .pipe($.babel({ 17 presets: ['es2015'] 18 })) 19 .pipe(gulp.dest('dist/ztimages/')); 25 });
我们有了任务，但是怎么执行任务呢？ 在命令行工程目录下输入gulp es6 就可以执行这个任务了。但是我们不能每写一行代码就手动“执行”一下。这样也太麻烦了。我们可以配置一个监听任务。
1 //监听文件修改 2 gulp.task('watch', ['es6'], function() { 3 gulp.watch(['src/js/earth.js'], ['es6']); 4 });
类似的我们也可以加入LESS的文件监听。
在命令行工程目录下输入gulp watch就可以执行这个监听任务了。
总结：
这样一个简单的ES6环境就搭建好了。当然还有好多其他的方法，我仅仅先介绍一个比较容易上手的方法给大家。
