ESNext 指的是 ECMAScript 的下一个版本，它包含了许多新的特性和语法，如箭头函数、解构赋值、Promise、async/await 等等。然而，并不是所有的浏览器都支持 ESNext 的语法，因此我们需要使用 Babel 来将 ESNext 代码转换成 ES5 代码，以便在所有浏览器中运行。
在本文中，我们将介绍如何在 Babel 中开启 ESNext 的特性，以便在项目中使用最新的语法和特性。
安装 Babel
首先，我们需要安装 Babel。可以使用以下命令在项目中安装 Babel：
--- ------- ---------- ----------- ---------- -----------------
这个命令会安装 Babel 的核心库 @babel/core，命令行工具 @babel/cli 和预设环境 @babel/preset-env。@babel/preset-env 是一个可以根据目标环境自动启用所需的插件和转换器的 Babel 预设。
配置 Babel
在安装完成后，我们需要在项目中创建一个 .babelrc 文件，用于配置 Babel。
在 .babelrc 文件中，我们需要指定我们要使用的预设，以及其他任何需要的插件。例如，以下是一个简单的 .babelrc 文件：
- ---------- --------------------- -
这个 .babelrc 文件告诉 Babel 使用预设 @babel/preset-env 来转换代码。@babel/preset-env 可以根据目标环境自动启用所需的插件和转换器。
使用 ESNext 特性
现在，我们已经安装并配置了 Babel，我们可以开始使用 ESNext 的特性了。例如，我们可以使用箭头函数：
----- --- - --- -- -- - ------ - - -- -
这个箭头函数将两个参数相加并返回它们的和。在 ES5 中，我们需要使用 function 关键字来定义函数：
--- --- - ----------- -- - ------ - - -- --
然而，由于我们已经配置了 Babel，我们的箭头函数代码将被转换成 ES5 代码，以便在所有浏览器中运行。
使用 async/await
除了箭头函数之外，我们还可以使用 async/await。例如，以下是一个使用 async/await 的示例：
----- ------- - ----- -- -- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------ ----- -
这个函数使用 async/await 来获取远程数据。在 ES5 中，我们需要使用回调函数来处理异步代码。例如：
--- ------- - ------------------ -
-------------------------------------
------------------------ -
------ ----------------
--
-------------------- -
---------------
---
--然而，由于我们已经配置了 Babel，我们的 async/await 代码将被转换成 ES5 代码，以便在所有浏览器中运行。
结论
在本文中，我们介绍了如何在 Babel 中开启 ESNext 的特性。我们安装了 Babel，配置了 .babelrc 文件，并使用了 ESNext 的特性，如箭头函数和 async/await。通过使用 Babel，我们可以在项目中使用最新的语法和特性，而不必担心浏览器兼容性的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673b0c3739d6d08e88b15b8e