ES6 环境搭建

由于 ES6 的语法并没有完全被浏览器所兼容，所以可以利用一些工具把 ES6 转化成 ES5 的语法，这样可以达到测试功能的的作用。主要用到的工具有

gulp + babel

这里我的电脑是 ThinkPad X230 win7 用 GIT 输入命令行，不知道 git 的同学可以看看廖雪峰大神的博客。

gulp

怎么用 gulp gulp官方文档

1. 全局安装 gulp：
   $ npm install --global gulp

   

2. 作为项目的开发依赖（devDependencies）安装：
   $ npm install --save-dev gulp
   

   

3. 在项目根目录下创建一个名为 gulpfile.js 的文件：

   var gulp = require('gulp');
   gulp.task('default', function() {
   // 将你的默认的任务代码放这里
   });

上面的默认代码我们写了一个控制台的打印 hello world
下面的代码就是 gulpfile.js 的内容

var gulp = require('gulp');
gulp.task('hello', function() {
  console.log('hello world')
});      

然后运行命令
gulp hello
得到下图

babel 的使用

babel 的官网是 babeljs。这里使用的是 gulp-babel 在命令行中执行
cnpm install --save-dev gulp-babel babel-preset-es2015
这时候在 gulpfile.js 中写入如下代码
var gulp = require('gulp');
var babel = require('gulp-babel');

/*gulp.task('hello', function() {
  console.log('hello world')
});*/


gulp.task('babelTask', function() {
  gulp.src('es6Test.js')//这是要转化的目标文件
      .pipe(babel({
          presets: ['es2015']
      }))
      .pipe(gulp.dest('dist'))//把转化完的文件生成到 disk 文件夹下

});     

新建目标文件 es6Test.js 内容随便写了一个 ES6 的语法

let a = 10;
console.log(a);      

保存以上的文件，然后执行命令 gulp babelTask

这时候你会发现在项目的目录下有个 dist 的文件夹，里面有转化好的目标文件

环境算是搭建完成了，感谢千峰教育杜老师的直播教学。