es6 环境搭建

使用Babel把ES6编译成ES5。

建立工程目录

先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist

• src：书写ES6代码的文件夹，写的js程序都放在这里。
• dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。

编写index.html

文件夹建立好后，我们新建一个index.html文件。

需要注意的是在引入js文件时，引入的是dist目录下的文件。

<script src="./dist/index.js"></script>

编写index.js
在src目录下，新建index.js文件。
let a=1;
console.log(a);
初始化项目
在安装Babel之前，需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具，进入项目目录，输入下边的命令：
npm init -y
-y代表全部默认同意，就不用一次次按回车了。命令执行完成后，会在项目根目录下生产package.json文件。
 
 
全局安装Babel-cli
在终端中输入以下命令,如果你安装很慢的话，可以使用淘宝镜像的cnpm来进行安装。安装cnpm的方法，大家自己百度吧。
cnpm install -g babel-cli
本地安装babel-preset-es2015 和 babel-cli
cnpm install --save-dev babel-preset-es2015 babel-cli
 
新建.babelrc
在根目录下新建.babelrc文件(注意，以点开头的文件是隐藏文件，可以创建.babelrc.文件)，并打开录入下面的代码
{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}
这个文件我们建立完成后，现在可以在终端输入的转换命令了，ES6成功转化为ES5的语法。
babel src/index.js -o dist/index.js


为了可以简化输入语句，可以通过在package.json文件中的scripts属性进行更改：
 "scripts": {
    "build":"babel src/index.js -o dist/index.js"
  },
 

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