Babel 是一个 JavaScript 编译器，它能将 ES6+ 的代码转换成向后兼容的 JavaScript 代码，以便在当前和旧版浏览器，甚至 Node.js 上运行。Babel 7 是 Babel 的最新版本，它带来了一些重大变化，其中最显著的是 preset-env。
preset-env 是一个 Babel 插件，它根据您的目标浏览器或运行环境自动确定需要转换的 Babel 插件和 polyfill。这意味着您不再需要手动配置每个插件和 polyfill，而是可以让 preset-env 处理这些细节。
下面是如何在 Babel 7 中使用 preset-env 配置的详细步骤：
步骤 1：安装 Babel
首先，您需要安装 Babel。可以使用 npm 或 yarn 安装 Babel CLI：
npm install --save-dev @babel/core @babel/cli
或者
yarn add --dev @babel/core @babel/cli
步骤 2：安装 preset-env
接下来，您需要安装 preset-env 插件：
npm install --save-dev @babel/preset-env
或者
yarn add --dev @babel/preset-env
步骤 3：创建 Babel 配置文件
在项目根目录下创建一个名为 .babelrc 的文件，内容如下：
{
"presets": ["@babel/preset-env"]
}这将告诉 Babel 使用 preset-env 插件。
步骤 4：运行 Babel
现在，您可以使用 Babel CLI 来转换您的代码。例如，如果您想将一个名为 index.js 的文件转换成 ES5 代码，可以运行以下命令：
npx babel index.js --out-file index-es5.js
或者
yarn babel index.js --out-file index-es5.js
示例代码
下面是一个示例代码，它使用了一些 ES6+ 的语法和 API，例如箭头函数、模板字面量和 Promise：
-- -------------------- ---- -------
----- --------- - -- -- -
------ --- ----------------- ------- -- -
-------------------
-------------- -- ----------------
---------- -- --------------
------------ -- ---------------
---
--
----- ---------- - ------ -- -
----- --------- - -------------------------------------
------------------- - -
----
--------------- -- ------------------ ------------------------------
-----
--
--
--------------------------------------------------如果您运行上面的示例代码，它将在旧版浏览器或 Node.js 中报错。但是，如果您使用 preset-env，它将自动将代码转换成 ES5 代码，以便在旧版浏览器或 Node.js 中运行。
结论
Babel 7 的 preset-env 插件是一个强大的工具，它可以帮助开发人员自动确定需要转换的插件和 polyfill，从而简化了 Babel 配置。如果您想在您的项目中使用最新的 JavaScript 语法和 API，但又不想放弃对旧版浏览器或 Node.js 的支持，那么使用 preset-env 插件将是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67276e492e7021665e1d0b8e