Babel 是一个广泛使用的 JavaScript 编译器，可以将最新的 ECMAScript 语法转换为向后兼容的版本，以便在旧版浏览器中运行。Babel 的核心是 preset，它是一组插件的集合，用于将新的语法转换为旧版语法。在本文中，我们将探讨如何正确配置 Babel 的 preset，以便在前端开发中更好地使用它。
安装 Babel 和 preset
首先，我们需要安装 Babel 和 preset。在命令行中输入以下命令：
npm install @babel/core @babel/cli @babel/preset-env --save-dev
这将安装 Babel 的核心库、命令行工具和最常用的 preset，即 @babel/preset-env。
配置 .babelrc 文件
接下来，我们需要配置 Babel 的 preset。打开项目根目录下的 .babelrc 文件，输入以下代码：
{
"presets": ["@babel/preset-env"]
}这将告诉 Babel 使用 @babel/preset-env 作为默认 preset。@babel/preset-env 可以根据目标浏览器或 Node.js 版本自动确定需要转换的语法。例如，如果您的项目需要支持 Internet Explorer 11，@babel/preset-env 将自动将箭头函数转换为普通函数、将 let 和 const 转换为 var 等等。
配置 preset 选项
除了使用默认选项外，您还可以配置 preset 的选项。例如，您可以指定目标浏览器或 Node.js 版本，或者指定要排除的语法特性。
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- ------ - ---------- --- -- ----
--
---------- --------------------------------
-
-
-
-在上面的示例中，我们指定了目标浏览器为最近的两个版本和 Internet Explorer 11。我们还排除了 transform-async-to-generator 插件，因为它会将 async/await 转换为 generator 函数，而我们不想这样做。
配置多个 preset
在某些情况下，您可能需要同时使用多个 preset。例如，您可能希望使用 @babel/preset-react 来转换 JSX 语法。在这种情况下，您可以像这样配置 .babelrc 文件：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}结论
正确配置 Babel 的 preset 可以帮助您更好地使用最新的 ECMAScript 语法，并确保您的代码在旧版浏览器中正常运行。在本文中，我们介绍了如何安装 Babel 和 preset、如何配置 .babelrc 文件以及如何配置 preset 选项和多个 preset。希望本文能够帮助您更好地理解 Babel 的 preset，并在前端开发中更好地使用它。
示例代码
以下是一个使用了箭头函数和 let 的示例代码：
-- -------------------- ---- ------- ----- ------- - --- -- --- ----- -------------- - ------------------ -- ------ - --- --- --- - -- --- ---- - - -- - - ---------------------- ---- - --- -- ------------------ - -----------------
使用 @babel/preset-env，这段代码将被转换为以下代码：
-- -------------------- ---- ------- ---- -------- --- ------- - --- -- --- --- -------------- - -------------------- -------- - ------ ------ - -- --- --- --- - -- --- ---- - - -- - - ---------------------- ---- - --- -- ------------------ - -----------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674538fcc1a23897ea8d5baf