es6的babel环境简单搭建

1：建立一个es6的根目录，在根目录下创建dist和src两个文件夹，src是用来存放es6语法的js文件的文件夹， dist是用来存放从es6转化过来的es5的js文件的文件夹。

2：在根目录下建立一个index.html的文件，在这个html中我们将要引用已经转换好的es5的js文件。

3：在src中新建一个index.js文件。这个文件内容如下，这里面只是写的我们的测试内容，let就是es6中的语法了，相当于es5中的var，当然它们之间还是有差别的，具体是什么在这里我就不多说了。

4：打开命令提示符窗口，首先先保证已经安装好nodejs(如何安装直接百度); 在根目录下先初始化：npm init -y

回车后我们发现根目录下多了一个文件package.json文件,我们打开

5：我们在回到cmd中，安装babel：npm install -g babel-cli

6：然后我们安装es2015：npm install --save-dev babel-preset-es2015 babel-cli

安装成功后我们可以打开package.json文件，发现对了一个“devDependencies”对象

7：然后我们再在根目录下创建一个.babelrc的文件(如果是win系统将不能直接创建会提示必须加文件后缀，我们直接命名为.babelrc.后保存就行了)并添加以下内容

8：这时候我们再到cmd命名页面直接运行：babel src/index.js -o dis/index.js

9：然后我们打开dist文件发现多了一个index.js文件，打开后内容已经转换为es5

10：这时我们发现每次es6转换为es5我们敲的代码太复杂麻烦这时我们打开package.json找到这个对象，

将他改为

11：我们先把dist下的index.js文件删除，然后我们再回到cmd运行：npm run build

12：然后我们再打开打开dist文件下index.js文件然后内容已经转换为es5 ，并且我们发现文件中多了“use strict" ，这时es6中的严格模式，具体是什么意思我就不多讲了。

好了，今天的分享就到这里了，如果有什么错误希望大家指正。