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環境就搭建好了。當然還有好多其他的方法，我僅僅先介紹一個比較容易上手的方法給大家。