在前端编程领域里，使用 ES6 的 async/await 方法已经普遍被认为是一种标准的编程方式，这也意味着在一些老的浏览器版本上，该语法是不被支持的。为了能够在更多的浏览器上使用 async/await，我们需要使用 Babel 进行编译。 在本文中，我们将深入探讨如何通过 Babel 编译 ES6 async/await 程序以实现新旧浏览器的兼容性。
需求说明
为了简化本文所述内容，请先安装 Babel、NodeJS 和 npm 环境向导
需要使用 babel-preset-env 和 babel-plugin-transform-runtime 两个程序
我们使用以下代码进行测试。其中，有两个 async/await 函数：
-- -------------------- ---- ------- ----- -------- -------------- - ----- -------- - ----- ----------- ------ ---------------- - ----- -------- ----------- - ----- ---- - ----- ---------------------------------------------------------- ------------------ - ------------
步骤指南
步骤1：安装 Babel
在控制台中输入以下命令，以安装 Babel 环境：
npm install @babel/core @babel/cli
步骤2：配置 .babelrc 文件
我们按照以下方式配置 .babelrc 文件。
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -- ------ --- -----
--
--
---------- -
---------------------------------
-
-其中，"targets": ">0.25%, not dead" 表示所有的浏览器，注意不要太低或者太高，否则编译的代码会更庞大，有可能会出现无法调试的错误。
步骤3：运行 Babel
运行以下命令，以将代码转换为可执行的 JavaScript。
npx babel yourfile.js --out-file compiled.js
步骤4：测试
通过将此文件加载到网页中并查看控制台输出，可以测试您的代码是否已成功编译。
在我们的示例中，我们的控制台输出应该与以下内容相同：
{text: "quia"}结论
通过这个过程，我们已经成功将 ES6 代码编译为可用于早期浏览器的 JavaScript 。ES6 的 async/await 程序是一种非常方便易用的编程方式，它可以大大减少在编写异步代码时的复杂度。感谢 Babel，我们可以在更多的浏览器上使用这项新技术，从而使我们的产品更容易接入更多的用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674562bbc1a23897ea939b4c