ECMAScript 6 环境搭建

现在的Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6的语法，这就需要我们把ES6的语法自动的转变成ES5的语法 。

ECMAScript 6 参考网址

建立工程目录：

建立一个项目的工程目录，在目录下建立两个文件夹：src和dist，并新建一个 index.html 文件。

src：书写ES6代码的文件夹，写的js程序都放在这里。

dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的是这里的js文件。

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

在src目录下，新建index.js文件

初始化项目

打开终端，输入初始化命令

npm init -y

-y代表全部默认同意，但项目目录文件夹名称首字母不能大写。命令执行完成后，会在项目根目录下生产package.json文件。

全局安装Babel-cli

在终端中输入安装命令

npm install -g babel-cli

建议使用淘宝镜像 cnpm 进行安装

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

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

安装完成后，package.json文件，已经多了devDependencies选项。项目目录下会出现 node_modules 文件夹。

新建 .babelrc

此时可以在终端输入转换命令，将ES6转换为ES5语法。

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

完成后在 dist 目录下 生产了 index.js文件

简化命令

打开package.json文件，修改文件下 "scripts" 选项。

修改好后，我们就可以使用 npm run build 来进行ES6与ES5的转换了。