Babel预设是babel-transpiler的配置详细信息，告诉它在指定模式下将其转换.以下是我们将在本章讨论的一些最受欢迎的预设 :
ES2015
Env
React
我们需要使用具有我们想要代码的环境的预设被转换.例如， es2015 预设会将代码转换为 es5 .值为 env 的预设也将转换为 es5 .它还具有附加功能，即选项.如果您希望在最新版本的浏览器上支持该功能，只有在这些浏览器上不支持功能时，babel才会转换代码.使用Preset react ，Babel将在何时做出反应时转换代码.
要使用Presets，我们需要在项目根文件夹中创建.babelrc文件.为了显示工作原理，我们将创建一个项目设置，如下所示.
npm init
我们必须按照以下方式安装所需的babel预设以及babel cli，babel core等.
npm install babel-cli babel-core babel-preset-es2015 --save-dev
npm install @babel/cli @babel/core @babel/preset-env --save-dev
注意 : babel-preset-es2015已被弃用babel 7以后.
es2015或@ babel/env
创建.babelrc文件在项目的根目录(babel 6) :
在.babelrc中，预设为es2015.这是对babel编译器的指示，我们希望将代码转换为es2015.
对于babel 7，我们需要使用预设，如下 :
{
"presets":["@babel/env"]
}这是安装后的package.json :
由于我们在本地安装了babel，因此我们在package.json的scripts部分添加了babel命令.
让我们一个简单的例子来检查转换使用预设的es2015.
main.js
let arrow = () => {
return "this is es6 arrow function";
}透明到es5，如下所示.
npx babel main.js --out-file main_es5.js
main_es5.js
"use strict";
var arrow = function arrow() {
return "this is es6 arrow function";
};使用Env预设，您可以指定要转换为最终代码的环境.
我们将使用上面创建的相同项目设置，并将预设从es2015更改为env，如下所示.
此外，我们需要安装babel-preset-env.我们将执行下面给出的命令来安装它.
npm install babel-preset-env --save-dev
我们将再次编译main.js并查看输出.
main.js
let arrow = () => {
return "this is es6 arrow function";
}npx babel main.js --out-file main_env.js
main_env.js
"use strict";
var arrow = function arrow() {
return "this is es6 arrow function";
};我们已经看到转换后的代码是es5.如果我们知道代码将要执行的环境，我们可以使用此预设来指定它.例如，如果我们将浏览器指定为chrome和firefox的最后一个版本，如下所示.
npx babel main.js --out-file main_env.js
main_env.js
"use strict";
let arrow = () => {
return "this is es6 arrow function";
};我们现在正在获取箭头函数语法.它没有被转换成ES5语法.这是因为我们希望代码支持的环境已经支持箭头函数.
Babel负责使用babel-preset-env基于环境编译代码.我们还可以根据nodejs环境定位编译，如下所示
代码的最终编译如下所示.
npx babel main.js --out-file main_env.js
main_env.js
"use strict";
let arrow = () => {
return "this is es6 arrow function";
};Babel根据当前版本的nodejs编译代码.
当我们使用Reactjs时，我们可以使用react预设.我们将使用一个简单的示例并使用react预设来查看输出.
要使用预设，我们需要安装babel-preset-react(babel 6)，如下所示;
npm install --save-dev babel-preset-react
对于babel 7，它是如下 :
npm install --save-dev @babel/preset-react
对于babel6&minus，.babelrc的更改如下:
对于babel 7
{
"presets": ["@babel/preset-react"]
}main.js
<h1>Hello, world!</h1>
npx babel main.js --out-file main_env.js
main_env.js
React.createElement( "h1", null, "Hello, world!" );
main.js中的代码转换为reactjs语法与preset:react.
