babel将ES6转成ES5

1.babel是什么

简而言之，babel是一个javascript转译器。随着javascript在不断的更新，浏览器并不能一下子全部明白和支持js新的语法和功能等。而babel就是充当翻译的角色，将javascript中新增的特性转为现代浏览器能理解的形式。例如：将ES6的语法转化成ES5的语法。

2.安装babel（版本6）

注意：babel版本6的安装与之前的版本5不同。原因：在babel 6中，将babel拆分成两个包：babel-cli和babel-core。而版本5全放在一个包里，安装时只需要安装一个babel就可以用了。

（1）全局安装Babel。

$ npm install -g babel-cli

（2）为项目安装babel，先在项目根目录下新建package.json文件，再执行

$ npm install -g babel-cli --save-dev

仅执行上面的命令，babel还不能转码。需要下载一些转码规则（插件）

ES5的转码规则：

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

react的转码规则：

$ npm install --save-dev babel-preset-react

ES7的转码规则（4个阶段，任选一个）：

$ npm install --save-dev babel-preset-stage-0  
$ npm install --save-dev babel-preset-stage-1  
$ npm install --save-dev babel-preset-stage-2  
$ npm install --save-dev babel-preset-stage-3

3.使用babel进行转码

（1）.在项目中新建一个script.js文件，写些ES6代码。例如：

"use strict";
let breakfast = (dessert, drink) => dessert + drink;

本人使用phpstorm，如果新建的js文件中，写ES6，如果语法正确，但提示报错的情况下，可以修改settings中的javascript版本

（2）.在项目根目录新建一个 .babelrc配置文件(windows)

type null>.babelrc.

在配置文件中，写入：

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ],
  "plugins": []
}

（3）.转码文件

执行下面的命令，可以直接在命令窗口中看到转码后的代码

babel script.js

若想直接把转码的结果放到一个新的文件中，可以执行

babel script.js --out-file newScript.js

大功告成！