详解babel的配置文件.babelrc

最近在搞项目迁移，一切都是从零开始。有的浏览器还不能识别最新的es6语法，在进行项目框架搭建的时候需要将es6最新的语法转化为浏览器能识别的语法，这个时候就用到了babel。

一、什么是babel? 它是干什么用的？

ES6是2015年发布的下一代javascript语言标准，到现在的ES2019，它引入了新的语法和API，使我们编写js代码更加得心应手，比如let、class、Symbol、 promise等，但是由于这些js新特性只能被最新版本的浏览器支持，一些低版本浏览器并不支持，那么想要在低版本浏览器上运行就需要一个转换工具，把es6代码转换成浏览器能识别的代码，babel就是这样的一个工具。可以理解为 babel是javascript语法的编译器。

二、 Babel编译器

在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。 babel6.X版本之后，所有的插件都是可插拔的，也就是说只安装babel依然无法正常的工作，我们需要配置对应的.babelrc文件才能起作用。 在.babelrc配置文件中，主要是对预设(presets) 和 插件(plugins) 进行配置。

.babelrc配置文件一般如下：

{
  "presets": [
     [
       "env",
       {
         "modules": false
       }
     ],
     "stage-2"
  ],
  "plugins": [
     [
      "transform-runtime",
      {
        "polyfill": false
      }
     ]
   ]  
}

下面我们来具体分析一下.babelrc里面的内容。

1、presets(预设)
presets属性告诉Babel要转换的源码使用了哪些新的语法特性，presets是一组Plugins的集合。
1.1、理解 babel-preset-env
比如：
babel-preset-es2015: 可以将es6的代码编译成es5.
babel-preset-es2016: 可以将es7的代码编译为es6.
babel-preset-es2017: 可以将es8的代码编译为es7.
babel-preset-latest: 支持现有所有ECMAScript版本的新特性。
举个列子，比如我们需要转换es6语法，我们可以在 .babelrc的plugins中按需引入一下插件，比如：
check-es2015-constants、es2015-arrow-functions、es2015-block-scoped-functions等等几十个不同作用的plugin：
那么配置项可能是如下方式：

// .babelrc
{
  "plugins": [
    "check-es2015-constants",
    "es2015-arrow-functions",
    "es2015-block-scoped-functions",
    // ...
  ]
}

但是Babel团队为了方便，将同属ES2015的几十个Transform Plugins集合到babel-preset-es2015一个Preset中，这样我们只需要在.babelrc的presets加入es2015一个配置就可以完成全部ES2015语法的支持了，如下：

// .babelrc
{
  "presets": [
    "es2015"
  ]
}

但是我们随着时间的推移，将来可能会有跟多的版本插件,比如 bebel-preset-es2018,… 等等。
因此 babel-preset-env 出现了，它的功能类似于 babel-preset-latest，它会根据目标环境选择不支持的新特性来转译。

首先需要在项目中安装，如下命令：

npm install babel-preset-env --save-dev

注意这里用的是–save-dev