何在前端JavaScript开发中使用ES新特性？babel是什么？.babelrc文件又是干什么用的？文件中的presets和plugins又是什么鬼？本文将解答上述疑问。

babel是什么

babel是一个JavaScript编译器

为什么要babel

ES规范今年来更新较为频繁，近几个版本推出很多新的特性，而用户的浏览器版本众多，很多用户用的是老版本浏览器，老版本浏览器不支持ES新特（nodejs也存在同样问题，参见），babel就是用来让你可以使用ES新特性，又可以使代码运行在老版本浏览器上。

Babel 通过语法转换器支持最新版本的 JavaScript 。 语法转换插件允许你立刻使用新语法，无需等待浏览器支持。

babel工作流程简介

解析-->转换-->生成代码

• 解析生成AST语法树
• 根据插件对AST树进行遍历转译并得到新的AST树（新特性转译）
• 生成代码

babel使用

1.在构建工具中（以webpack为例）使用：

// 在webpack.config.js中增加babel-loader，如下所示
module: {
 rules: [
 { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
 ]
}

2.在babel-cli中使用

npm install -g babel-cli
babel src -d lib // 将src中的代码转译并将生成的文件放到lib目录下
复制代码

babel的配置

babel的配置是要告诉babel工具使用哪些插件转译代码，主要作用于babel工作的第二阶段（转译）

babel工作前会从.babelrc文件读取配置，根据配置对JavaScript进行转译。

下面以.babelrc文件的配置方式为例介绍，配置项主要有两个，presets，plugins；

{
 "presets": ["env"],
 "plugins": ["babel-plugin-transform-object-assign"]
}

plugins配置具体插件，而对于ES新特性需要配置的插件多达几十个，如果一一配置就太麻烦来，于是babel给我们提供一些插件集，插件集配置在presets配置项中，目前官方提供的插件集有：

1. env
2. react
3. flow

其中 env（babel-preset-env）相当于 es2015 ，es2016 ，es2017 及最新版本。

4. stage-X

Stage-x preset 中的任何转换都是对未被批准为 JavaScript 版本一部分的语言的变化(如 es6 / es2015 )，其分为以下5各阶段：

Stage 0 - 稻草人: 只是一个想法，可能是 babel 插件。
Stage 1 - 提案: 初步尝试。
Stage 2 - 初稿: 完成初步规范。
Stage 3 - 候选: 完成规范和浏览器初步实现。
Stage 4 - 完成: 将被添加到下一年度发布。

上述配置的插件和插件集也是需要通过npm安装的

npm install babel-preset-env --save-dev
npm install babel-plugin-transform-object-assign --save-dev

babel presets(转换插件集)配置

"presets": ["env"] // 默认将运行所有transfrom和集成所有的polyfill

也可以仅仅配置项目所支持浏览器所需的polyfill和transform。只编译所需的代码会使你的代码包更小。如下所示，该转换只支持每个浏览器最后两个版本和safari大于等于7的版本所需的polyfill和代码转换。

、行级标签转换为块级标签

转换为块级标签，各自独占一行，且可以设置宽高

代码：<a href="">我是a标签</a>

<a href="">我是a标签</a>

<a href="">我是a标签</a>

CSS :display:block;

width: 100px;

height: 30px;

border: 1px solid black;

在浏览器中的样式：

二、块级标签转换为行级标签

转化为行级标签，共同占一行，不能设置宽高

代码：<h3>我是块级标签</h3>

<h3>我是块级标签</h3>

<h3>我是块级标签</h3>

CSS：display: inline;

width: 200px;

height: 100px;

border: 1px solid red;

在浏览器中的样式：

三、转化为行内块级标签

能共占一行，而且可以设置各自的宽高

1.行级元素转化为行内块级元素

代码：<a class="a1" href="">我是a标签</a>

<a class="a2" href="">我是a标签</a>

CSS： a{ display:inline-block; border: 1px solid black; }

.a1{width: 100px; height: 30px; }

.a2{ width: 50px; height: 50px; }

在浏览器中的样式：

2.块级标签转化为行内块级标签

代码：<h3 class="h3_1">我是块级标签</h3>

<h3 class="h3_2">我是块级标签</h3>

CSS：h3{display: inline-block;border: 1px solid red;}

.h3_1{width: 100px;height: 100px;}

.h3_2{width: 200px;height: 50px;}

在浏览器中的样式：

四、display的另一个属性，可以将元素隐藏

display：none；

如果想了解更多块级标签和行内标签的属性，请关注，参看上一篇文章，有写的不对或不全面的地方，请大家多多指出。