前言

Babel是一个ES6转码器，可以将ES6代码转为ES5代码。因为现在各个浏览器或者终端对ES6的支持并不完全同步，所以当你的代码中使用了ES6语法，就有可能发生问题。Babel会在打包的时候将ES6转换成ES5，保证代码的健壮性。接下来我们看看如何在项目中配置Babel：

第一步：创建package.json

打开命令行工具进入项目文件，输入"npm init" 项目下创建package.json，package.json中，至少要有两部分内容"name"与"version"。

第二步：创建Babel的配置文件.babelrc

在项目根目录创建名为.babelrc的配置文件，.babelrc文件用于设置转码规则和插件，基本格式如下：

{

    "presets":[ ],  // 设置转码规则

    "plugins":[ ]  // 插件

}

第三步：项目安装babel包

npm install –save-dev babel-core babel-preset-env babel-preset-stage-2

babel-core

babel-core的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。

babel-preset-env

这个preset比较特殊, 需要了解一下历史背景。最初，为了让开发者能够尽早用上新的JS特性，babel团队开发了babel-preset-latest。这个preset比较特殊，它是多个preset的集合(es2015+)，并且随着ECMA规范的更新更增加它的内容。

随着时间的推移，babel-preset-latest 包含的插件越来越多，这带来了如下问题：

1、加载的插件越来越多，编译速度会越来越慢；

2、随着用户浏览器的升级，ECMA规范的支持逐步完善，编译至低版本规范的必要性在减少（比如ES6 -> ES5），多余的转换不单降低执行效率，还浪费带宽。

因此babel官方推出了babel-preset-env插件。它可以根据开发者的配置，按需加载插件。配置项大致包括：

1、需要支持的平台：比如node、浏览器等。

2、需要支持的平台的版本：比如支持node@6.1等。

默认配置的情况下，它跟 babel-preset-latest 是等同的，会加载从es2015开始的所有preset。

babel-preset-stage-2

首先我们了解一个东西：

stage-x：指处于某一阶段的js语言提案

Stage 0 - 设想（Strawman）：只是一个想法，可能有 Babel插件。

Stage 1 - 建议（Proposal）：这是值得跟进的。

Stage 2 - 草案（Draft）：初始规范。

Stage 3 - 候选（Candidate）：完成规范并在浏览器上初步实现。

Stage 4 - 完成（Finished）：将添加到下一个年度版本发布中。

使用babel-preset-stage-x这个preset是为了扩大可编译ECMAScript语法的范围，babel-preset-env这个preset只会编译Stage 4 的ECMAScript。其实babel-preset-stage-x不是必须的。

接下来我们将preset文件配置到配置文件中：

{    

    "presets":[

        "env"， // babel-preset-后面部分作为配置名称

        "stage-2"

    ],  // 设置转码规则    

    "plugins":[ ]  // 插件

}

第四步：项目中安装babel-cli, package.json配置编译命令

输入npm install --save-dev babel-cli安装babel-cli, 然后改写package.json：在scripts中加入 "build": "babel src -d lib"

src：放置原js的文件夹路径

lib：放置转换后js的文件路径（没有的话会自动创建）

这样一来就能通过build命令进行转码了！