Babel就是大家熟知ES6转ES5语法的工具 Babel官网
具体我们可以在官网查看更多
一般在React项目根目录下安装以下三个安装包
yarn add babel-preset-env --dev
yarn add babel-cli --dev
yarn add babel-preset-react --dev
关于yarn相关命令可以查看 Yarn用法
关于使用 babel-preset-env 这个包官方说明，为替换之前babel-presets-es20xx插件，相当于官方的一个整合。方便开发者使用。
在使用中发现 此包中不包含stage-x相关插件
所以我们在React开发中有时候需要安装 stage-0
例如如下的情况：
在图中使用了箭头函数，编译的时候报错，这时添加上如下包
yarn add babel-preset-stage-0 --dev
项目中的.babelrc就如下显示：
{
"presets":
[ "env", "stage-0", "react" ]
}
这时编译上面的箭头函数就会通过。
env只是JS语法转译插件，如果需要使用ES6的API，必须另外安装babel-polyfill；如果你需要使用babel的API，必须另外安装babel-core；如果你需要转译JSX，需要另外安装babel-preset-react
在遇到问题，首先在官方文档中查看，如果没明白，在网上搜素可以查出相关说明。
比如说babel-presets-env的预设文件设置可以如下：具体参数说明在此【babel】查看
{
"presets": [
[ "env", {
"targets": { "safari": 10 },
"modules": false,
"useBuiltIns": true,
"debug": true }]
]
}
解决方案
babel-preset-env工作babel-preset-latest，但它可以让你指定一个环境，只有在该环境中遗漏的功能。
请注意，这意味着您需要自行安装和启用插件和/或预设实验功能（不属于babel-preset-latest）。
另外一方面，你不需要es20xx预设。
浏览器
对于浏览器，您可以选择指定：
a.浏览器通过浏览器查询语法。例如：
1. 支持最后两个版本的浏览器和IE 7+。
"babel": {"presets": [["env",{"targets": {"browsers": ["last 2 versions","ie >= 7"]}}]]},
2. 支持拥有5％以上市场份额的浏览器。
"targets": {"browsers":"> 5%"}
b.固定版本的浏览器：
"targets": {"chrome":56}
Node.js
如果您通过Babel即时编译Node.js的代码，babel-preset-env则特别有用，因为如果您将目标设置"node"为"current"：对Node.js的当前运行版本做出反应，
"babel": {"presets": [["env",{"targets": {"node":"current"}}]]},
具体使用，要多实践实践。
