随着前端技术的不断发展，JavaScript 作为前端开发的核心语言，也在不断更新和改进。ECMAScript 2018 是 JavaScript 的最新版本，其中引入了一些新特性，如 async/await，可以使异步代码的编写更加简单和清晰。但是，由于一些浏览器还不支持这些新特性，我们需要使用 transform-async-to-generator 插件来将 async/await 转换成 ES5 代码，以便在旧版浏览器中运行。本文将介绍如何正确使用 transform-async-to-generator 插件。
什么是 transform-async-to-generator 插件
transform-async-to-generator 插件是 Babel 的一个插件，用于将 async/await 转换成 ES5 代码。由于 async/await 是 ECMAScript 2018 的新特性，一些旧版浏览器还不支持，因此需要使用这个插件将其转换成 ES5 代码，以便在这些浏览器中运行。
如何正确使用 transform-async-to-generator 插件
使用 transform-async-to-generator 插件很简单，只需要在 Babel 中配置即可。以下是一个示例的 Babel 配置文件：
// www.javascriptcn.com code example
{
"presets": [
["@babel/preset-env", {
"targets": {
"chrome": "58",
"ie": "11"
}
}]
],
"plugins": [
["@babel/plugin-transform-async-to-generator"]
]
}在这个配置文件中，我们使用了 @babel/preset-env 预设来指定目标浏览器的版本，同时使用了 @babel/plugin-transform-async-to-generator 插件来转换 async/await。这个配置文件中，我们将目标浏览器指定为 Chrome 58 和 IE 11，如果你需要支持其他浏览器，可以根据需要进行修改。
需要注意的是，使用 transform-async-to-generator 插件时，必须同时使用 @babel/preset-env 预设，否则无法正确转换 async/await。
transform-async-to-generator 插件的指导意义
使用 transform-async-to-generator 插件的主要作用是将 ECMAScript 2018 的新特性 async/await 转换成 ES5 代码，以便在旧版浏览器中运行。这对于开发者来说非常重要，因为一些用户可能仍然使用旧版浏览器，我们需要确保我们的代码在这些浏览器中能够正常运行。
此外，使用 transform-async-to-generator 插件还可以使我们的代码更加清晰和易于维护。async/await 是一种更加简单和直观的异步编程方式，可以使我们的代码更加易于理解和调试。
示例代码
下面是一个使用 async/await 的示例代码，我们将使用 transform-async-to-generator 插件将其转换成 ES5 代码：
async function fetchData() {
const response = await fetch('/api/data');
const data = await response.json();
return data;
}使用 transform-async-to-generator 插件后，上面的代码将被转换成如下的 ES5 代码：
function fetchData() {
return regeneratorRuntime.async(function* () {
const response = yield regeneratorRuntime.awrap(fetch('/api/data'));
const data = yield regeneratorRuntime.awrap(response.json());
return data;
})();
}可以看到，使用 transform-async-to-generator 插件后，我们的代码变得更加复杂，但是这样可以确保我们的代码在旧版浏览器中能够正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d12cf7a941bf713427d4d2