ES6环境搭建（Babel）

一、说明
es6跟es5不同的是，es6需要搭建环境，不像es5那样直接就可以编写运行，因为有些浏览器还是不支持es6的，所以还需要babel对其进行转换（babel是一个javascript转译器，将javascript中新增的特性转为现代浏览器能理解的形式es5）。
版本都是向前兼容的，就是老版本js版本中规定的语法和api在新版本的js中同样也会合理的。针对不同的规范，Babel也提供了对应的转换器。

babel-preset-es2015 将es2015版本的js转译为es5。

babel-preset-es2016 将es2016版本的js转译为es5。

babel-preset-es2017 将es2017版本的js转译为es5。。。
二、项目环境搭建
1、新建一个项目，在该文件夹新建一个src文件，用来存放js文件，新建一个dist文件，用来存放转换为es5语法的js文件，还有建立一个index.html文件，src下新建一个index.js文件，在index.html中引入<script src="./dist/index.js"></script>。

2、命令窗口切换到该目录下，输入"npm init -y"生成一个package.json文件。

3、先输入”(c)npm install babel-cli -g"对bebal进行全局安装。
接着再输入"(c)npm install --save-dev babel-preset-es2015 babel-cli“，将babel-preset-es2015和babel-cli进行本地（本项目）安装。

npm安装说明：
——npm install moduleName # 安装模块到项目目录下
——npm install -g moduleName # -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。
——npm install -save moduleName # -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。
——npm install -save-dev moduleName # -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
4、接着新建一个.babelrc文件(主要是对预设presets和插件plugins进行配置)，在文件中输入：

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

5、命令输入"babel src/index.js -o dist/index.js"，-o表示输出，即将src下的文件index.js通过babel转换器转换es5后输出到dist文件夹下的index.js文件，转换测试如下。
src/index.js

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 回调里面的 `this` 变量就指向了期望的那个对象了
        this.age++;
        console.log(this.age);
    }, 3000);
}
var p = new Person();
console.log(p.age);

dist/index.js

"use strict";

function Person() {
    var _this = this;

    this.age = 0;
    setInterval(function () {
        // 回调里面的 `this` 变量就指向了期望的那个对象了
        _this.age++;
        console.log(_this.age);
    }, 3000);
}
var p = new Person();
console.log(p.age);

6、为了可以简化输入语句，可以通过在package.json文件中的scripts属性进行更改。

这时只需要在控制台输入"npm run build"即可达到在控制台输入babel src/index.js -o dist/index.js相同的效果。

ES6环境搭建（Babel）

推荐阅读更多精彩内容