学习ES6-（lesson-one）

ES6

ES6 是不兼容低版本浏览器的，为了使它能兼容低版本浏览器，我们需要用Babel来将ES6编译成ES3（传统浏览器都支持的）。

** 安装node **

官网安装node 之后 按住window+r键 输入 cmd 打开doc命令 输入 node -v 回车 检查node是否安装成功，如果安装成功就能看到node的当前版本；

** Babel 下载 都是在命令行操作的 **

使用babel编译es6

1、下载安装babel 环境：需要电脑上安装node（node中一般都会自带npm包管理器）

我们安装 babel是要安装 babel的什么呢？ 记住 我们是要安装babel-cli 它是在命令行里进行转码的；

安装babel-cli 在命令行里输入 npm install babel-cli -g -g 就是--globe 把模块安装在全局环境下（在任何的项目中都可以使用命令来编译代码） 卸载 npm uninstall babel-cli -g 把安装在全局下的babel模块卸载掉

安装成功之后 在命令行里查看安装的路径 然后找到相应的安装目录，会发现一些需要连接的知识点： 1.我们后期之所以可以使用babel的命令，是因为安装在全局环境下之后，会生成一些 xxx.cmd的文件，这里的xx.cmd就是可以在doc窗口中执行的命令；

2.执行babel命令后我们可以完成一些编译或者其他的任务，主要原因是执行babel命令后会自动加载一些处理任务的文件

** 配置 .babelrc文件**

下载完成babel之后，还需要配置 .babelrc文件 ，安装一些语言解析包 1、我们需要把 .babelrc文件配置在当前项目的根目录下（这个文件没有文件名，后缀名是babelrc） a:在电脑上不能直接创建没有文件名的文件，我们需要使用webstrom里 new ---file 来创建，或者使用命令来创建。 b：babelrc这个后缀名在某些webstrom中是不识别的，它其实是一个json文件，我们需要在ws中配置一下（目的：让他隶属于json文件）

2、然后在这个文件里写点内容

{
"presets":[], //=>存放的是我们编译代码时候需要依赖的语言解析包；
"plugins":[] //=>存放的是我们编译代码需要依赖的插件信息
}
复制代码

3、安装依赖的语言解析包 在当前项目的根目录下安装（不是安装在全局），需要注意的是：要在当前项目根目录中打开doc命令才行，安装完成之后在该项目目录下会有一个 node_modules文件夹，在这个文件夹中有我们安装的模块 npm install babel-preset-latest 安装已经发布的最新语言标准解析模块； npm install babel-preset-stage-2 安装当前还没有发布但是已经进入草案的语言解析模块（如果你的代码中用到了发布非标准的语法，我们需要安装它 在命令行里一次性下载多个模块 书写方法：npm install babel-preset-latest babel-preset-stage-2 不同模块中间加一个空格

4、完成最后.babelrc文件的配置

{ "presets":["latest","stage-2" ],

"plugins": []

}
复制代码

三、使用命令编译js代码

基本上所有支持命令操作的模块都有一个命令 babel --help/ babel -h 查看帮助 注意 全写两个横杠 缩写一个横杠 常用的命令 babel --version/babel -v 查看版本号 babel --out-file /babel -o 把某一个js文件中的es6代码进行编译 babel --out-dir /babel -d 把某一个文件夹中所有的js文件中的es6代码进行编译 babel --watch /babel -w 监听文件中代码的改变，当代码改变后，会自动进行编译

在命令行里清除内容 cls

结束监听的程序：ctrl+c 按两遍