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


标签：

相关文章