Babel是什么？
要是官方文档写得好的话，我也许就不用自己做个笔记。
官方文档
babel 是一个工具链，主要用于将 ecmascript 2015+ 版本的代码转换为向后兼容的 javascript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 babel 能为你做的事情：
1、语法转换
2、通过 polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
3、源码转换 (codemods)
4、更多！ (查看这些 视频 获得启发)
ps：
指南文档第一篇关于babel的解释，就有三个问题：
1、第2句中“通过 polyfill 方式”这一段。在解释一个概念时，引入自己的内容细节作延伸解释，会让人产生另一个疑问，这东西又是什么？它该回答的是这是什么，而不应该包含这怎么做。
2、第4句的更多查看视频的，更让人无语。我从没看过一个框架、库或工具，是需要读者看视频来总结该东西的功能的。连一个工具的功能都不能简洁说明，实在不明白写文档的人在想什么。
3、文档组织缺少逻辑，比较零散。例如指南刚说了babel的功能，下面却写了一些插件的使用方法，以此反向引出babel的功能，即散乱，又不全面。
babel是什么
babel是将es6及以上版本的代码转换为es5的工具。
它用 babel.config.js 或 .babelrc 文件作为配置文件，其中最为重要的配置参数是presets和plugins。
plugins：babel插件可以将输入源码进行转换，输出编译后的代码。
presets：一组babel插件，目的是方便使用。官方已经内置了一些preset，如babel-preset-env。
ps：其他的查看babel文档就行。
现学现用
以 .babelrc 配置文件为例，解释常用的用法。
例子一：
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryname": "element-ui",
"stylelibraryname": "theme-chalk"
}
]
]
}
ps：es2015 = es6
这个babel配置：
1、使用 babel-preset-es2015（简写为es2015）将es6的代码转为es5。
ps：
2、“ modules: false”，是不把模块转换成其他模块类型（"amd" | "umd" | "systemjs" | "commonjs" | "cjs" ）。
3、”component"，其实也就是 babel-plugin-component 插件，它是将组件的引用代码进行转换。
ps：
import { button } from 'components'
var button = require('components/lib/button’)
require('components/lib/button/style.css')
例子二：
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
这个babel配置：
1、使用 babel-preset-env 将es6的代码转为es5。presets里的“env” 是模块名称，作为第一个参数，第二个参数是该模块的传入参数。
虽然 babel-preset-es2015 与 babel-preset-env 的功能类似，但推荐使用 babel-preset-env ，babel-preset-es2015已不建议使用。
ps：详细参数解释请看，比官方文档写得更清晰。
2、presets设置了env和stage-2，模块的执行顺序是从下至上，从高级版本到低级版本。这很好理解，例如代码里包含es7和es6的语法，那你肯定得先转换es7，再转换es6，因为es7的代码可能转换成es6的代码。
3、根层级的“env”，则是在不同node_env参数下，另一套生效的babel配置。如里面的“test”所配置的，就是在 node_env=test 时的babel配置。
ps：babel-plugin-istanbul请看
总结
要是想看babel的一些插件的具体用法，建议是直接在npm上看，babel的文档看起来实在难受。