ES6 初体验 —— gulp+Babel 搭建ES6环境

时间:2023-01-09 17:09:39

今天在学ES6,学到ES不定参数和默认参数,发现很好用,完全可以抛弃arguments对象了,arguments是一个类数组对象,虽然有length,而且可以用索引访问各个元素,但是绝大多数开发者也许需要将参数转化成数组,于是一百度,有很多将参数转化成数组的解决方案,但是ES6,直接不定参数就是一个数组。非常好用。突然想起了为什么有了箭头函数,原来是开发者总是绑定this到当前对象,然而箭头函数解决这一个问题。明白了语言和世界的发展是相似的,不过是在原来的基础上解决了一些矛盾,变得更省事省时一些吧。

因此想到,以后多用ES6写东西啊,但是看到了这样一句话:

在服务器端,现在你可以在io.js中使用ES6(在Node中你需要使用--harmony这个命令行选项)。
在浏览器端,到目前为止只有Firefox 27+和Chrome 39+支持了ES6生成器。如果要在web端使用生成器,你需要使用Babel或Traceur来将你的ES6代码转译为Web友好的ES5。

生成器支持的程度都这样了,所以想到用工具将ES6编译成ES5。前一段学了gulp,于是百度了一下用gulp搭建ES6编译成ES5的环境。

第一步:

init 生成package.json文件,一般选择MIT协议。

第二步:

将devDependencies复制一下

  "devDependencies": {
"babel-preset-es2015": "^6.5.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.6.0",
"gulp-jshint": "^2.0.2",
"gulp-load-plugins": "^1.1.0",
"gulp-plumber": "^1.0.1",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.4.1",
"gulp-util": "^3.0.1",
"jshint": "^2.9.4"
}
npm install 安装以上插件

第三步:

新建一个gulpfile.js文件

var gulp = require('gulp'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify');
// Load plugins
var $ = require('gulp-load-plugins')();

/* es6 */
gulp.task('es6', function() {

return gulp.src('src/es6js/*.js')
.pipe($.plumber())
.pipe($.babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist/'));
});
编辑文件,然后执行gulp es6即可完成编译。

一个非常简单的ES6环境就搭建好了。

问题描述:

当我gulp es6的时候,提示Cannot find module 'jshint/src/cli

问题原因:

百度之后发现gulp更新了,插件安装不完全,新版本gulp做了一些调整

解决方案:

使用npm install --save-dev jshint gulp-jshint
而不是npm install --save-dev gulp-jshint