ES6环境的搭建

es6作为ECMAScript第六个版本，相对es5增加了很多新特性（如果有想了解es6新特性的，可以看es6新特性），但es6还是要依赖于es5而生存，所以今天要讲的是es6的环境搭建。

1、先新建一个文件夹（我取的名字是zwh-es6），然后在里面建相应的文件夹dist和src，再在src下建index.js，在zwh-es6下建index.html，结构如图所示：

2、然后对项目进行初始化，在控制台输入npm init -y 

 

就会生成一个package.json文件，就是一些介绍文字

3、然后开始环境的搭建：

先输入”npm install babel-cli -g"对bebal进行全局安装，如果网速较慢，可以使用cnpm（想要开心地写 ES6 的模块化代码，首先你需要一个转译器（Transpiler）来把你的 ES6 代码转换成大部分浏览器都支持的 ES5 代码。这里我们就选用最多人用的 Babel（我不久之前才知道原来 Babel 就是「巴别」……）。）

接着再输入"npm install --save-dev babel-preset-es2015 babel-cli“，将babel-preset-es2015和babel-cli进行本地安装，安装成功后就会在package.json文件中有记录，如图：

4、这时在控制台输入"babel src/index.js -o dist/index.js"，-o表示输出，即将src下的文件index.js通过babel转换器转换后输出到dist文件夹下的index.js文件。（dist下面一开始是没有新建Index.js文件的，但执行了该条命令后，会自动生成index.js文件）

以下是本次的测试：

左边是src下的index.js，然后在控制台输入babel src/index.js -o dist/index.js，就会生成右边是dist下index.js的内容

5、但每次输入babel src/index.js -o dist/index.js太麻烦了，为了可以简化输入语句，可以通过在package.json文件中的scripts属性进行更改：

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