BabelJS Babel 预设
Babel 预设是 babel-transpiler 的配置细节，告诉它在指定的模式下进行转译。以下是我们将在本章中讨论的一些最流行的预设-
ES2015
Env
React
我们需要使用具有我们希望转换代码的环境的预设。例如，
es2015 预设会将代码转换为
es5。预设值为
env 也将转换为
es5。它还具有附加功能，即选项。如果您希望最新版本的浏览器支持该功能，则 babel 仅在这些浏览器不支持功能时才会转换代码。使用 Preset
react，Babel 会在响应时转译代码。
要使用预设，我们需要在项目根文件夹中创建 .babelrc 文件。为了展示工作，我们将创建一个如下所示的项目设置。
命令
我们必须安装所需的 babel 预设以及 babel cli、babel core 等。
Babel 6 包
npm install babel-cli babel-core babel-preset-es2015--save-dev
Babel 7 包
npm install @babel/cli @babel/core @babel/preset-env--save-dev
注意-babel-preset-es2015 从 babel 7 开始不推荐使用。
es2015 或 @babel/env
在项目根目录（babel 6）中创建 .babelrc 文件-
在 .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 preset 来查看输出。
要使用预设，我们需要如下安装 babel-preset-react (babel 6)-
npm install--save-dev babel-preset-react
对于 babel 7，如下-
npm install--save-dev @babel/preset-react
babel6 对 .babelrc 的更改如下-
对于 babel 7
{
"presets": ["@babel/preset-react"]
}
main.js
命令
npx babel main.js--out-file main_env.js
main_env.js
React.createElement(
"h1",
null,
"Hello, world!"
);
main.js 中的代码使用preset:react 转换为reactjs 语法。
