babel相关（1）

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"}}]]},

具体使用，要多实践实践。