ES6的开发环境搭建

前言：
　　 现在的Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6的语法，这就需要我们把ES6的语法自动的转变成ES5的语法。
　　除了Webpack自动编译，我们还可以用Babel来完成
　　接下来讲述使用Babel把ES6编译成ES5的环境搭建

正文：

一. 结构目录：

新建两个空文件夹及主页index.html
两个文件夹的作用：
　　src:利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。
　　dist:书写ES6代码的文件夹，写的js程序都放在这里。
　　

二.准备工作：

　　在src中建一个js文件，写一些简单的es6语句，在主页html中引入该js文件，我们的目的是让es6通过babel编译成es5，babel编译生成的es5我们让它存放在dist里面的一个同样为index.js文件里
　　

三.开始搭建环境:

3.1根目录初始化文件

　　　　在安装Babel之前，需要用npm init先初始化我们的项目
　　　　

//在根目录的终端输入npm init -y

完了之后可以看见，文件里面多了一个package.json文件

3.2全局安装babel-cli

 npm install -g babel-cli

3.3 安装转换包

本地安装babel-preset-es2015 和 babel-cli

npm install --save-dev babel-preset-es2015 babel-cli

3.4 新建文件名为.babelrc 的文件

//windows下目录文件下输入 type nul >.babelrc

然后看看现在的目录文件：

3.5 在.babelrc文件里输入一下代码

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

3.6 最后输入转换命令

babel src/index.js -o dist/index.js 

3.7还有最最最后一步:简化转换命令

在学习vue 的时候，可以使用npm run build 直接利用webpack进行打包，在这里也希望利用这种方式完成转换。打开package.json文件，把文件修改成下面的样子。

  "scripts": {    "build": "babel src/index.js -o dist/index.js"  },

效果图:

转换后: