[TOC] ## 使用Babel编译ES6 >1、 下载安装Babel >环境：需要电脑上安装node(node中一般都会自带npm包管理器) >`npm install babel-cli -g` >`npm uninstall babel-cli -g` 之所以在命令行中能直接使用`babel命令`，是因为安装在全局环境下之后，会生成一些xxx.cmd的文件，而这里的xxx就是可以在DOC窗口中执行的命令。  - babel.cmd - babel-node.cmd 开启repl - ... 在执行babel命令后我们可以完成一些编译或则其它任务，主要原因是执行babel命令后，会自动加载一些处理任务的文件 打开babel.cmd  ## 配置.babelrc文件，安装一些语言解析包 >我们需要把.babelrc文件配置在当前项目的根目录下 1、 我们需要把.babelrc文件配置在当前想项目的根目录下（这个文件没有文件名，后缀名是babelrc） 注意事项： - a： 在电脑上不能直接创建没有文件名的文件，我们可以在webstorm中创建，或则使用命令创建 - b：babelrc这个后缀名在某些ws中是不识别的，它其实是一个json文件，我们需要在ws中配置一下（让它隶属于json文件）  （新版的webstorm不存在这个问题） 2、 添加配置 ``` //.babelrc { "presets":[] //=>存放的是我们编译代码时候需要依赖的语言包 ,"plugins":[] //=>存放的是，我们编译代码时候需要依赖的插件信息 } ``` >3、 安装依赖的语言解析包 >在当前项目的根目录下安装（不是安装在全局），需要特殊注意的是：要在当前项目根目录中打开DOC命令才可以 >`npm install babel-preset-latest`安装最新已经发布的语言标准解析模块 >`npm install babel-preset-stage-2`安装当前还没有发布但是已经进入草案的语言解析模块（如果你的代码中用到了非正式发布的标准语法，我们需要安装他） >... >安装成功之后在当前根目录下会存在一个`node-modules`文件夹，在这个文件夹中有我们安装的模块。 > >4、 完成最后.babelrc文件的配置 ``` { "presets":[ "lates" ,"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 监听文件中代码的改变，当代码改变后，会自动进行编译 ```