ES6开发环境搭建

第一步：建立工程目录：

先建立一个工程目录，并在目录下建立两个文件夹：是src和dist
src:写es6的文件夹，写的js程序都放在这里
dist:利用Babel编译成的es5代码的文件夹，在html页面里需要引入这里的文件夹

编写index.html:

文件夹建立后，新建一个index.html文件：

image.png

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

image.png

image.png

编写index.js文件:

在src目录下，新建一个index.js文件夹，这个文件很简单，只作一个a变量的声明，并console.lgo()打印出来

image.png

第二步：初始化项目（搭建环境正式开始）

在安装Babel之前，需要用npm init初始化我们的项目,打开ctrl+r打开cmd，输入以下命令：

image.png

这步安装完成后，自动生成一个package.json文件夹，如下图结构所示：

image.png

package.json文件里面内容的说明：

image.png

可以根据自己实际需要的内容修改，比如name值

初始化已经完成

第三步：全局安装Babel-cli（安装转化插件）

在cmd输入以下命令，如果安装得很慢，可以用淘宝镜像cnpm进行安装：

image.png

虽然安装Babel-cli成功了，但还不能进行基本转换命令，需要做以下操作：

注意：安装完后，并没有转换成es5语法

image.png

虽然dist文件夹多了一个index.js,但打开后依然是es6语法

image.png

image.png

因为还缺少两个东西（缺少包），所以转换不成功es5语法

第一个东西：es5打包用的这个包：
本地安装babel-preset-es2015和babel-cli: 输入以下命令安装：

image.png

查看是否安装成功，打开package.json，如果多了一项这样的东西，则说明安装成功，以下图所示：

image.png

到了这个步骤，还不能打包项目，因为缺少babelrc这个文件，这个文件建在根目录下
并输入以下代码：

image.png

这个文件夹建立后，可以在cmd输入以下命令了：

image.png

这次es6语法转换为es5语法了

image.png