简单使用Babel转换ES6语法。

前言

Babel 是一个 JavaScript 编译器。这句话是Babel官网的自我介绍，就是说Babel可以编译javascript，包括ECMA2015或以上新特性的js和一些javascript扩展语言，如JSX。

所以说在使用Babel的时候，我们要告诉Babel我们希望编译的是哪种js（js的版本），所以需要进行配置。然后Babel知道了是哪种js之后，还需要为Babel装上编译相应js的模块，Babel中称为插件。而在本例中，我们要编译的是ES6。那编译ES6需要如何配置Babel和使用哪个插件呢，在官网中有说明。

Babel可以配合多种工具使用，本文使用的是结合gulp的方式。查看更多方式。

注：ES6是泛指5.1版以后的js的下一代标准，正式的说法是ES2015。查看相关背景。

使用gulp工具

1、安装gulp、babel

npm方式

npm install gulp babel --save-dev

yarn方式

yarn add gulp babel  --dev

2、编写gulpfile.js

gulp.src表示原文件的路径，babel()就是调用babel编译的方法，dest表示输出的路径。

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
    return gulp.src('src/*.js')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});

3、配置babel

方式一：创建.babelrc文件，添加以下内容

{
   "presets": ['es2015']
 }

方式二：在pacjage.json配置，在其中添加以下内容

"babel": {
     "presets": ["es2015"]
  }

4、安装babel插件

npm方式

npm install --save babel-preset-es2015

yarn方式

yarn add babel-preset-es2015  --dev

5、执行 gulp

参考资料：

http://babeljs.cn

http://es6.ruanyifeng.com/#docs/intro